Chrome扩展程序无法使用 [英] Chrome extension doesn't work
问题描述
<！ -
您可以根据
Apache许可条款（http：// www。 apache.org/licenses/LICENSE-2.0.html）
- >
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict。 DTD>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta http-equiv =content-typecontent =text / html; charset = utf-8/>
< title>
Google Visualization API示例
< / title>
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script>
< script type =text / javascript>
google.load（'visualization'，'1'，{packages：['corechart']}）;
< / script>
< script type =text / javascript>
函数drawVisualization（）{
//创建并填充数据表。
var data = google.visualization.arrayToDataTable（[
['Task'，'Hours per Day']，
['Work'，11]，
['Eat' ，2]，
['Commute'，2]，
['Watch TV'，2]，
['Sleep'，7]
]）;
//创建并绘制可视化文件。
new google.visualization.PieChart（document.getElementById（'visualization'））。
draw（data，{title：那么，今天过得如何？}）;
}
google.setOnLoadCallback（drawVisualization）;
< / script>
< / head>
< body style =font-family：Arial; border：0 none;>
< div id =visualizationstyle =width：600px; height：400px;>< / div>
< / body>
< / html>
上面的代码在html文件中为我们生成了一个饼图。当我在浏览器中打开它时，它可以工作。让我们调用文件 popup.html 。
然后我想让它成为Chrome扩展，并带有以下清单文件：$ name $历史展示器
version：1.0，
manifest_version：2，
description：帮助我们以可视化的方式分析历史统计信息，
browser_action：{
default_icon：icon.png，
default_popup：popup.html
}
}
但是当我点击图标按钮时，饼图不会加载。任何人都可以帮助我？
编辑：检查弹出窗口后的错误消息如下。
由于
Content-Security-Policy拒绝从http://www.google.com/jsapi加载脚本。由于
Content-Security-Policy拒绝执行内联脚本。
<您需要在
manifest.json 中为您的扩展指定权限，以便使用<$ c中的资源 permissions：[
http： //*.google.com/
，
或者如果这不会请尝试允许您的扩展程序访问所有网址：
permissions：[
< all_urls>
]，
详细了解权限这里。
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {title:"So, how was your day?"});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
The above code generates a pie chart for us in an html file. It works when I open it in a browser. Let's call the file popup.html.
Then I want to make it a Chrome extension with the following manifest file:
{
"name": "History Visualizer",
"version": "1.0",
"manifest_version": 2,
"description": "Helps us analyze history stats in a visual way",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
But when I hit the icon button, the pie chart just won't load. Anyone help me?
EDIT: error message after inspecting the popup is as follows.
Refused to load script from 'http://www.google.com/jsapi' because of Content-Security-Policy. Refused to execute inline script because of Content-Security-Policy.
You need to specify permissions for your extension in manifest.json in order to use resources from google.com:
"permissions": [
"http://*.google.com/"
],
Or if this won't work, try allowing your extension to access all URLs:
"permissions": [
"<all_urls>"
],
Read more about permissions here.
这篇关于Chrome扩展程序无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
