獲取內容腳本以在頁面加載時追加圖像

我剛開始學習如何爲Google Chrome製作擴展程序。到目前爲止，我有一個非常基本的理解，所以我想嘗試一些小東西。獲取內容腳本以在頁面加載時追加圖像

現在，我正試圖在每次加載頁面時，將圖像附加到特定頁面上的特定div。該擴展加載正常，但JavaScript代碼似乎永遠不會運行，圖像永遠不會加載。

這是manifest.json文件中我到目前爲止：

{ 
    "manifest_version": 2, 
    "name": "Icon Creator", 
    "description": "Creates a custom icon for page", 
    "version": "1.0", 

    "content_scripts": [ 
    { 
     "matches": ["file:///home/tijko/documents/learning/javascript/test_page.html"], 
     "css": ["sample.css"], 
     "js":["trial.js"] 
    } 
    ], 
    "icons": {"icon": "icon.jpg"}, 
    "web_accessible_resources":["trial.js"] 
}

和JavaScript：

var test = function() { 
    custom_icon = document.createElement("img"); 
    target = document.getElementById("location"); 
    custom_icon.src = "icon.png"; 
    target.appendChild(custom_icon); 
} 
test()

來源

2013-05-08 tijko

你嘗試加載自己的分機的icon.png？現在，您正試圖在本地頁面的域和路徑上加載icon.png。相反，您應該這樣做：

custom_icon.src = chrome.extension.getURL("icon.png");

指的是您的分機的icon.png。

另外，您必須在您的web_accessible_resources列表icon.png。此外，您不需要需要在您的web_accessible_resources（very specialized use cases除外）中列出trial.js。

最後，您需要通過選中chrome://extensions的擴展程序列表下方的相應框，批准您的擴展程序以訪問file://頁面。

來源

2013-05-08 17:32:18 apsillers

感謝您的回覆，我已經完成並對'custom_icon.src = chrome.extension.getURL（「icon.jpg」）'進行了編輯，並確保從'web_accessible_resources'中刪除'trial.js'然後放入'icon.jpg'。最後，在'chrome：// extensions'下已經檢查過'file：//'。這些變化仍然沒有圖像。 – tijko 2013-05-08 17:44:12

@tijko你真的在調用'test'嗎？也就是說，您的JavaScript是否會對您的整個內容腳本進行採樣你最後需要一個'test（）'調用，否則你的函數不會真正運行。 – apsillers 2013-05-08 17:52:57

是的，我已經在'trial.js'文件的末尾調用了函數'test'，但這仍然不起作用。那是當我開始認爲我需要一個像'addEventListener'這樣的特定函數。我編輯了我的帖子以顯示此內容。 – tijko 2013-05-08 18:08:29

獲取內容腳本以在頁面加載時追加圖像

回答

相關問題