如何使用 chrome 扩展/插件访问 HTML 元素？答案

【问题标题】：How to access HTML elements using chrome extension/plugin?如何使用 chrome 扩展/插件访问 HTML 元素？
【发布时间】：2014-04-04 17:08:12
【问题描述】：

我正在尝试使用 Chrome 插件。我试图在 html 页面上找到所有 <p> 标签并更改这些标签的 font-family/size/color。基本上我只是在试验这个。

这是我到目前为止所做的。

A. manifest.json

{
    "name": "ABC XYZ",
    "description": "La la la...",
    "version": "1",
    "browser_action": {
        "default_title": "ABC",
        "default_icon": {
            "19": "icons/logo.png"
        },
        "default_popup": "mydefault.html"
    },
    "manifest_version": 2
}

B.我的默认.html

<html>

<head>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#do-magic").click(function() {
                // do something here with the page html.
                // change font-family
                $("body").append("test");
            });
        });
    </script>
</head>

<body>
    <span id="do-magic">Start</span>
</body>

</html>

当打包并加载到 chrome 时，除了我试图访问页面元素的点击事件之外，它可以工作。

点击事件不起作用。控制台中也没有打印任何内容。

请指教。

【问题讨论】：

没有。不知道你这话是什么意思？它出现在当您单击 chrome 上的扩展按钮时打开的 mydefault.html 页面中。从那时起，它就在 DOM 上。
尝试在</body> 之后写你的<script></script>，看看会发生什么！

标签： jquery html css google-chrome google-chrome-extension

【解决方案1】：

根据内容安全政策，您不能在 Chrome 扩展程序中使用内联脚本。这就是你的代码没有被执行的原因。

您必须将其移动到单独的文件中。见here。

【讨论】：

您还应该注意，您可能在错误的控制台中查找错误/输出。您需要右键单击该按钮并选择“Inspect Popup”以访问正确的控制台。

【解决方案2】：

为了能够阅读当前页面内容，您必须使用内容脚本

看看这个 https://developer.chrome.com/extensions/content_scripts

也检查这个例子

示例说明：https://developer.chrome.com/extensions/samples#download-selected-links

示例下载：https://developer.chrome.com/extensions/examples/api/downloads/download_links.zip

【讨论】：