javascript - chrome 扩展的内容脚本在 google、youtube 页面中不起作用

Question

我正在尝试创建一个 chrome 扩展程序。当用户单击我的扩展程序的图标 (browserAction) 时，内容脚本会向打开的页面(当前选项卡)的主体附加一个额外的 div。它在除谷歌搜索页面和 youtube 之外的所有网站上都能正常工作。我没有收到任何错误消息或任何东西。它根本不会给出任何响应。

这是我在 content.js 中的代码:

alert('sdsd');
$('body').append("<div id='popup'>My extension name</div>");

出于测试目的，我已发出警报。因此，当扩展被切换时，它应该显示一条警告消息，然后将 div 附加到 body，理想情况下!但它不会用于这 2 个站点。

知道这里可能出了什么问题吗？

list

{
    "name": "My first extension",
    "version": "1.0",
    "background": { "scripts": ["background.js"] },
    "content_scripts": [{
            "all_frames": true,
            "css": ["style.css"],
            "matches": ["http://*/*","https://*/*"]
        }],
    "permissions": [ "tabs","http://*/*" ],
    "browser_action": { "name": "test" },
    "manifest_version": 2
}

background.js

chrome.browserAction.onClicked.addListener(function(tab){
chrome.tabs.executeScript(null,{file:"jquery.min.js"},function(){
    chrome.tabs.executeScript(null,{file:"content.js"});
});

});

Answer 1

在 Youtube 的页面中，$ 被覆盖并且不是 jQuery。这是

bound: function ()
{
    return document.getElementById.apply(document, arguments)
}

因此您的代码会出现异常 document.getElementById('body')是undefined .

您应该尝试使用 noConflict() .

编辑:

你为什么不简单地列出 jQuery.min.js和你的 content.js在content_scripts而不是以编程方式注入(inject)它们。这样可以避免冲突。

编辑 2:

既然你使用了内容脚本，你应该使用communication as described here从 background.js 发送到内容脚本显示警报的指令。

编辑 3:

另一种解决方案是使用编程注入(inject)(就像您最初所做的那样)而不是使用 jquery，$('body').append("<div id='popup'>My extension name</div>");在 vanilla JS 中被翻译成

var div = document.createElement('div');
div.id = 'popup';
document.body.appendChild(div);
document.getElementById('popup').innerHTML = "My extension name"​;​

但它通常更干净(并且需要更少的权限)以避免程序化注入(inject)。