Question

这就是我在这里：

“的manifest.json”

{..."permissions": [
"https:/mywebsite.com/"],"content_scripts": [{
  "matches" : ["http://*/*", "https://*/*"],
  "js": ["js/jquery-1.7.2.min.js", "contentScript1.js", "contentScript2.js"],
  "all_frames" : true,
  "run_at": "document_end"
} ]}

“contentScript1.js”

$(document).ready(function() {
$('#someDiv').load('https://mywebsite.com/index.html');}

“contentScript2.js”

function showMessage()
{alert ('Hello World!');}

“的index.html”

<a href="" onclick="showMessage();"> <img src="https://mywebsite.com/images/myimage.png"></a>

我在这里真正做的是将可点击的图片注入我访问的页面的代码中，我希望通过点击图片会出现“Hello World”消息。尽管内容脚本和图片都是成功加载的，但是当我点击图像时，函数没有被调用，我在控制台中收到以下错误：

未捕获的ReferenceError：未定义showMessage

我认为它无法找到该功能，因为它在我注入代码而不是内容脚本的网站中寻找它。但是为什么这样，我的意思是如果我在内容脚本中加载它时调用该函数而不是通过单击图像，则会显示该消息。谁能让我离开这里？

Answer 1

我想我会回答我自己的问题：

发生这种情况的原因是因为内容脚本在隔离的世界中运行 见：http://code.google.com/chrome/extensions/content_scripts.html#execution-environment

因此，一旦你在content_scripts中注入了一些html代码就无法调用函数来在用户的当前页面中执行某些工作。

您需要做的就是像在html代码中一样在页面中注入脚本。所以：

（1）将要注入的文件添加到清单文件中的Web资源中见：http://code.google.com/chrome/extensions/manifest.html#web_accessible_resources

"web_accessible_resources": [
"Script2.js",
 "index.html",
"jquery-1.7.2.min.js"]

（2）在contentScript1.js中（将其加载为 content_script ）

 //inject your javascript files to the head of the page
function injectJs(srcFile) {
   var scr = document.createElement('script');
   scr.type="text/javascript";
   scr.src=srcFile;
   document.getElementsByTagName('head')[0].appendChild(scr);
}

injectJs(chrome.extension.getURL('jquery-1.7.2.min.js'));
injectJs(chrome.extension.getURL('Script2.js'));

//inject your html by loading query and passing your html page
$(document).ready(function() {
$('#someDiv').load(chrome.extension.getURL('./index.html'));}

就是这样！

Answer 2

您不理解我的解决方案以避免冲突不适用于您的current code。您不是使用$.noConflict，而是使用$().ready方法包装脚本注入函数。

您必须从清单的"js"部分删除jQuery：

  "js": ["contentScript1.js"],

contentScript1.js

function injectJs(srcFile) {
    var scr = document.createElement('script');
    scr.src = srcFile;
    document.getElementsByTagName('head')[0].appendChild(scr);
}
injectJs(chrome.extension.getURL('js/jquery-min.js'));
injectJs(chrome.extension.getURL('js/yourscript.js'));

不要忘记将js/yourscript.js添加到web_accessible_resources，以便可以使用它：

"web_accessible_resources": [
    "index3.html",
    "js/jquery-min.js"
    "js/yourscript.js"
]

在js/yourscript.js中，将函数逻辑与$.noConflict一起包装在匿名函数中。 $.noConflict(true)用于避免与页面中的脚本冲突。它会恢复$和jQuery的原始值。

(function(jQuery, $) {
    // Here, you can do anything you want.
    // jQuery and $ refer to the same jQuery object from `js/jquery-min.js`

})(jQuery, jQuery.noConflict(true));

再次查看您的问题后，我注意到您通过ajax加载内容：$('#someDiv').load(...)。注入脚本时，它将在页面范围内运行。这就是您的AJAX调用失败的原因：请求因Same origin policy而被阻止。

现在，我们可以使用不同的方法来修复您的代码。我们修改页面index.html，而不是将逻辑从内容脚本移动到页面（通过注入的脚本）。 click事件不是预先设置的，而是添加在内容脚本中。例如：

“的index.html”：

<a href="" id="showMessage"> <img src="https://mywebsite.com/images/myimage.png"></a>

“contentscript2.js”：

$('#showMessage').click(showMessage);

单击图像无法将函数调用到内容脚本

2 个答案: