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

Question

我刚刚开始学习如何为 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()

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:// 页面。