问不能通过单击图像来调用内容脚本的函数
EN

Stack Overflow用户

提问于 2012-07-02 14:54:23

回答 2查看 3.2K关注 0票数 0

这就是我现在所拥有的：

"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“消息。尽管内容脚本和图片是成功加载的，但当我单击该图像时，将不会调用该函数，并在控制台中得到以下错误：

Uncaught : showMessage未定义为

我想它在我注入代码的网站上找不到函数，而不是在内容脚本中。但是为什么，我的意思是，如果在加载内容脚本时调用函数，而不是单击图像，消息就会出现。有人能把我弄出去吗？

google-chrome

google-chrome-extension

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-07-03 23:46:28

您不理解我的解决方案，以避免冲突，不适用于您的当前代码。不是使用$.noConflict，而是将脚本注入函数封装在$().ready方法中。

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

  "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调用失败的原因:由于同源政策，请求被阻塞。

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

"index.html"：

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

"contentscript2.js"：

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

票数 1

Stack Overflow用户

发布于 2012-07-03 03:46:53

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

之所以会发生这种情况，是因为内容脚本运行在一个孤立的世界(请参阅：Scripts.html#execution-环境 )。

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

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

(1)在清单文件中添加要注入web资源的文件(请参阅：资源 )

"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'));}