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.extension.getURL("icon.png");

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

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

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

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

1 个答案: