Question

我想創建一個Chrome擴展。當用戶點擊我的擴展的圖標（browserAction）時，內容腳本會向打開的頁面（當前選項卡）的正文添加一個額外的div。它在除谷歌的搜索頁面和YouTube以外的所有網站都可以正常工作。我沒有收到任何錯誤消息或任何東西。它根本不會給任何迴應。

這是我在content.js代碼：

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

我已經把警戒測試目的。所以當擴展切換時，它應該顯示一條警告消息，然後將div附加到body，理想情況下！但它不會爲這兩個網站。

任何想法在這裏可能會出錯？

清單

{ 
    "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>");被翻譯成香草JS來

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

但它通常是更清潔（並且需要更少的權限）以避免程序化注入。