通过 chrome 扩展访问 DOM 元素
Posted
技术标签:
【中文标题】通过 chrome 扩展访问 DOM 元素【英文标题】：Access DOM elements through chrome extension 【发布时间】：2014-02-14 09:33:03 【问题描述】：我正在尝试从网页访问一些 DOM 元素：
<html>
<button id="mybutton">click me</button>
</html>
我想通过 chrome 扩展访问 innerHTML（“点击我”）：
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
【问题讨论】：
Chrome Extension - Get DOM content 的可能重复项 【参考方案1】：解决办法： 您需要一个清单文件、一个后台脚本和一个内容脚本。这在文档中并不清楚您必须使用它以及如何使用它。要警告整个 dom，请参阅 here。因为我很难找到一个真正有效的完整解决方案，而不仅仅是对像我这样的新手无用的 sn-ps，所以我提供了一个具体的解决方案：
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]://[...]***.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的脚本。如果需要，它可以将元素传递给另一个脚本。上面的例子使用了一个后台脚本，但它可以是一个弹出窗口。 您介意解释一下"matches": ["file:///*"], 行吗？这不只是针对本地文件吗？
它可以工作，但是一旦我在“browser_action”（manifest.json）中添加"default_popup": "popup.html"，它就会停止工作
有没有办法在安装扩展后监听 DOM 元素？我的意思是没有 onclick 事件侦听器？我在 chrome.runtime.onInstalled.addListener 中尝试过，但没有工作，或者我没有正确执行。以上是关于通过 chrome 扩展访问 DOM 元素的主要内容，如果未能解决你的问题，请参考以下文章
在 Chrome 扩展中使用 javascript/jquery 访问框架的 DOM
我试图通过 JS 触发 DOM 元素的悬停，但失败了。看来这是不可能的。但为啥 Chrome 可以做到呢？如何？
构建 chrome 扩展以按 DOM 元素对打开的选项卡进行排序
chrome扩展跟踪前端JavaScript，该JavaScript使用DOM/jQueryAPI在运行时操作html-DOM元素（例如，更改样式、附加事件侦听器）。