时间戳

首页 > 解决方案 > 通过 Chrome 扩展更改网页上的 HTML

javascript - 通过 Chrome 扩展更改网页上的 HTML

问题描述

我一直在尝试创建一个 Google Chrome 扩展来更改元素的类名并从网页中删除一个元素。我无法让它工作。在我的整个测试过程中，我认为当我尝试更改 HTML 元素时，它会尝试从 popup.html 更改 HTML，而不是我当前所在的网页。

我该如何解决这个问题？

这是我的代码示例：

清单.json：

{
    "manifest_version": 2,

    "name": "Tester",
    "version": "0.1.0",
    "browser_action": {
        "default_popup": "popup.html"
    },

    "permissions": [
        "activeTab",
        "tabs"
     ],

     "content_scripts": [{
       "js": ["popup.js"],
       "matches": ["<all_urls>"]
     }]
}

popup.html：

<html>
    <body>
        <h1>TestExtension</h1>
        <button id="thisButton">Click Me</button>
    </body>
</html>

popup.js：

document.addEventListener('DOMContentLoaded', function() {
    var buttonEvent = document.getElementById('thisButton');
    buttonEvent.addEventListener('click', function() {

        document.getElementByClassName("className").className = ""; // Changes body's class name
        document.getElementByClassName("otherClass").remove(); // Removes HTML element
    });

}, false);

标签： javascriptgoogle-chromegoogle-chrome-extension

解决方案

推荐阅读