通過chrome擴展訪問DOM元素

Question

我正在嘗試從網頁訪問一些DOM元素：

<html>
  <button id="mybutton">click me</button>
</html>

我想通過chrome擴展訪問innerHTML（“click me”）：

chrome.browserAction.onClicked.addListener(function(tab) {
    var button = document.getElementById("mybutton");
    if(button == null){
        alert("null!");
    }
    else{
        alert("found!");
    }
});

當我點擊擴展名時，彈出窗口顯示：“null”。 我的manifest.json：

{
    "name": "HackExtension",
    "description": "Hack all the things",
    "version": "2.0",
    "permissions": [
    "tabs", "http://*/*"
    ],
    "background": {
    "scripts": ["contentscript.js"],
    "persistent": false
    },
    "browser_action": {
    "scripts": ["contentscript.js"],
    "persistent": false
    },
    "manifest_version": 2
}

Answer 1

解決方案：您需要清單文件，后台腳本和內容腳本。 在您必須使用它的文檔中以及如何使用它並不是很清楚。 要提醒完整的dom，請看這里。 因為我很難找到一個真正有效的完整解決方案，而不僅僅是像我一樣對新手無用的片段，我提供了一個特定的解決方案：

的manifest.json

{
    "manifest_version": 2,
    "name":    "Test Extension",
    "version": "0.0",

    "background": {
        "persistent": false,
        "scripts": ["background.js"]
    },
    "content_scripts": [{
        "matches": ["file:///*"],
        "js":      ["content.js"]
    }],
    "browser_action": {
        "default_title": "Test Extension"
    },

    "permissions": ["activeTab"]
}

content.js

/* Listen for messages */
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    /* If the received message has the expected format... */
    if (msg.text && (msg.text == "report_back")) {
        /* Call the specified callback, passing 
           the web-pages DOM content as argument */
    sendResponse(document.getElementById("mybutton").innerHTML);
    }
});

background.js

/* Regex-pattern to check URLs against. 
   It matches URLs like: http[s]://[...]stackoverflow.com[...] */
var urlRegex = /^file:\/\/\/:?/;

/* A function creator for callbacks */
function doStuffWithDOM(element) {
    alert("I received the following DOM content:\n" + element);
}

/* When the browser-action button is clicked... */
chrome.browserAction.onClicked.addListener(function(tab) {
    /*...check the URL of the active tab against our pattern and... */
    if (urlRegex.test(tab.url)) {
        /* ...if it matches, send a message specifying a callback too */
        chrome.tabs.sendMessage(tab.id, { text: "report_back" },
                                doStuffWithDOM);
    }
});

的index.html

<html>
  <button id="mybutton">click me</button>
</html>

只需將index.html保存在某處並作為擴展名加載到文件夾中，其中包含其他三個文件。 打開index.html並按下擴展按鈕。 它應該顯示“點擊我”。

通過chrome擴展訪問DOM元素

問題描述

1 個解決方案

解決方案1
32 已采納 2014-01-24 19:10:55

通過chrome擴展訪問DOM元素

問題描述

1 個解決方案

解決方案1 32 已采納 2014-01-24 19:10:55

解決方案1
32 已采納 2014-01-24 19:10:55