Javascript 通过chrome扩展访问DOM元素_Javascript_Dom_Google Chrome Extension

Javascript 通过chrome扩展访问DOM元素

javascript dom google-chrome-extension

Javascript 通过chrome扩展访问DOM元素,javascript,dom,google-chrome-extension,Javascript,Dom,Google Chrome Extension,我正在尝试从网页访问一些DOM元素： <html> <button id="mybutton">click me</button> </html> 当我单击扩展时，弹出窗口显示：“null”。 My manifest.json： { "name": "HackExtension", "description": "Hack all the things", "version": "2.0", "permissi

我正在尝试从网页访问一些DOM元素：

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

当我单击扩展时，弹出窗口显示：“null”。 My 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
}

解决方案：您需要一个清单文件、一个背景脚本和一个内容脚本。文档中并不清楚您必须使用它，以及如何使用它。有关通知完整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);
    }
});

/* 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);
    }
});

background.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);
    }
});

/* 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并按下扩展按钮。它应该显示“单击我”。

要添加的可能的副本：内容脚本是可以访问网页DOM的脚本。如果需要，它可以将元素传递给另一个脚本。上面的示例使用了一个背景脚本，但它可能是一个弹出窗口。您是否介意解释一下

“匹配项”：[“文件：//*”]，

行？这不只是针对本地文件吗？它可以工作，但只要我在“browser\u action”（manifest.json）中添加一个

“default\u popup”：“popup.html”

，它就会停止工作。是否有办法在安装扩展后侦听DOM元素？我的意思是没有onclick事件监听器？我在chrome.runtime.onInstalled.addListener中尝试了它，但没有工作或没有正确执行。