0

这就是我在这里：

“清单.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!');}

“索引.html”

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

我在这里实际做的是向我正在访问的页面的代码注入一个可点击的图片，我希望通过点击图片会出现“Hello World”消息。尽管内容脚本和图片已成功加载，但当我单击图像时，未调用该函数，并且在控制台中出现以下错误：

未捕获的 ReferenceError：未定义 showMessage

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

4

2 回答 2

1

I think I m gonna answer my own question:

The reason that this happening is because content scripts run in an isolated world see: http://code.google.com/chrome/extensions/content_scripts.html#execution-environment

So, you simply cannot call functions, once you injected some html code, in content_scripts to perform some work in the current page of user.

What you have to do is to inject your scripts in the page as you do with html code. So:

(1) add the files you want to inject in web resources in your manifest file see: 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) in contentScript1.js (load this as a 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'));}

That's all!

于 2012-07-03T11:46:53.680 回答
1

您不了解我的避免冲突的解决方案不适用于您当前的代码。而不是 using $.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.jsto 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 ，请求被阻止。

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

“index.html”：

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

“contentscript2.js”：

$('#showMessage').click(showMessage);
于 2012-07-04T07:46:28.037 回答