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

Question

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

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

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

我已将警报用于测试目的。因此，当切换扩展时，它应该显示一条警报消息，然后将 div 附加到正文，理想情况下！但它不适用于这 2 个网站。

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

清单

{
    "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()。

编辑：

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

编辑 2：

现在您使用内容脚本，您应该使用communication as described here 从background.js 向内容脚本发送显示警报的指令。

编辑 3：

另一种解决方案是使用编程注入（就像您最初所做的那样）而不使用 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"​;​

但它通常更简洁（并且需要更少的权限）以避免程序注入。