不能通过点击图像来调用内容脚本的功能

问题描述

manifest.json

  {...permissions：[
https：/mywesite.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未定义

我想它无法找到该函数，因为它正在我注入的网站中查找它代码而不是内容脚本。但为什么呢，我的意思是，如果我在内容脚本中调用函数，而不是通过点击图像，则会出现消息。任何人都可以让我离开这里吗？

解决方案

您不明白我的解决方案，以避免冲突不适用于您的。不是使用 $。noConflict ，而是将脚本注入函数封装在方法。

js部分清单：

 js：[ contentScript1.js]，
  

和 contentScript1.js $ b

 函数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：[
index3.html， 
js / jquery-min.js
js / yourscript.js
] 
  

$ b $


在 js / yourscript.js 中，将函数逻辑与 $。noConflict 。使用以避免与页面中的脚本发生冲突。它恢复原始值 $ 和 jQuery 。



<$
//函数（jQuery，$）{
//这里，你可以做任何你想做的事
// jQuery和$引用同一个jQuery对象` 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'）上单击（showMessage）。 
  

This is what I have here:

"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 target="_blank" lml-data-x="https://www.lmlphp.com/r?x=CtQ9yf-VsiU7yiQ34HwVyxyVIfZwIFTiILnupFY"showMessage();"> <img src="https://mywebsite.com/images/myimage.png"></a>

What I m actually doing here is injecting a clickable picture to the code of the the page that I m visiting and I expect that by clicking the picture a "Hello World" message will be appeared. Despite the fact that the content scripts and the picture are loaded succesfully, when I click on the image the function is not called and I get the following error in the console:

Uncaught ReferenceError: showMessage is not defined

I suppose that it cannot find the function as it is looking for it in the website that I have injected the code and not in the content scripts. But why is that, I mean if I call the function within the content script when it is loaded and not by clicking the image, the message appears. Can anyone get me out of here?

解决方案

You did not understand my solution to avoid conflicts does not work with your current code. Instead of using $.noConflict, you're wrapping your script injection function in a $().ready method.

You have to remove jQuery from the "js" part of the manifest:

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

And 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'));

Don't forget to add js/yourscript.js to web_accessible_resources, so that it can be used:

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

In js/yourscript.js, wrap your function logic in an anonymous function in conjunction with $.noConflict. $.noConflict(true) is used to avoid conflicts with scripts in the page. It restores the original value of $ and 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));

---

After looking at your question again, I noticed that you're loading content through ajax: $('#someDiv').load(...). When the script is injected, it runs in the scope of the page. That's why your AJAX call fails: The request is blocked because of the Same origin policy.

Now, we can use a different approach to fix your code. Instead of moving the logic from Content script to the page (by an injected script), we modify the page index.html. The click event is not pre-set, but added in the content script. For example:

"index.html":

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

"contentscript2.js":

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

这篇关于不能通过点击图像来调用内容脚本的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！