Question

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

这是我在 content.js ：

中的代码

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

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

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

清单

{
    "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，而不是以编程方式注入它们。这样可以避免冲突。

编辑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";

但它通常更清晰（并且需要更少的权限）以避免编程注入。

chrome扩展程序的内容脚本无法在google，youtube网页中使用

1 个答案: