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

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.

此外,您必须列入icon.png您的web_accessible_resources.此外,您不需要trial.js在您的列表中列出web_accessible_resources(非常专业的用例除外).

最后,您需要file://通过选中扩展程序列表中的相应框来批准您的扩展程序以访问网页chrome://extensions.