非常简单的例子:
manifest.json
{
...
"content_scripts": [
{
"js": [
"/js/external/jquery-2.1.3.min.js",
"/js/content_script.js"
],
...
}
],
...
}
content_script.js
function demo() {
alert('demo');
}
$(function() {
$( "body" ).prepend(
"<input type="button" value="Press me" onclick="demo()" />"
);
});
我在控制台中收到此错误:
Uncaught ReferenceError: demo is not defined
如何使功能正常工作?
这里的问题是孤立的世界。
内容脚本有自己的 JS 上下文。您可以在内容脚本上下文中定义demo
。
但是,当添加这样的 DOM 节点时,onclick
属性将引用页面上下文,该上下文没有 demo
函数。
你在这里有很多选择。
-
最简单的方法是将侦听器附加到内容脚本上下文中的节点:
var node = $('<input type="button" value="Press me"/>').click(demo); $("body").prepend(node);
-
另一种方法是在页面上下文中定义
demo()
。为此,您需要通过<script>
标记将代码注入页面上下文。var script = document.createElement('script'); script.textContent = demo.toString(); (document.head||document.documentElement).appendChild(script); script.parentNode.removeChild(script);
请注意,此代码无法访问内容脚本上下文和 Chrome API。但是,它可能很有用,因为它可以访问页面自己的JavaScript。
-
如果需要混合使用两者(访问页面和内容脚本),则需要使两个上下文进行通信。
var node = $('<input type="button" value="Press me"/>').click(demo);
$("body").prepend(node);
另一种方法是在页面上下文中定义demo()
。为此,您需要通过 <script>
标记将代码注入页面上下文。