javascript - 获取内容脚本以在页面加载时附加图像

Question

我刚刚开始学习如何为谷歌浏览器制作扩展程序。到目前为止，我有一个非常基本的了解，所以我想尝试一些小的东西。

现在我正试图在每次加载该页面时将图像附加到特定页面上的特定 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()

Answer 1

您是否正在尝试加载您自己的扩展程序的 icon.png？现在您正在尝试在本地页面的域和路径上加载 icon.png。相反，您应该这样做:

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

引用您的扩展程序的 icon.png。

另外，您必须在web_accessible_resources 中列出icon.png。此外，您不需要在您的web_accessible_resources 中列出trial.js(very specialized use cases 除外)。

最后，您需要通过选中 chrome://extensions 中您的扩展程序列表下的相应框来批准您的扩展程序访问 file:// 页面。