时间戳

首页 > 解决方案 > default_popup js文件如何读取网页的DOM元素

javascript - default_popup js文件如何读取网页的DOM元素

问题描述

在标题中，我的意思是 default_popup js 文件是单击扩展图标时与 html 弹出页面链接的 javascript 文件。下面，在 manifest.json 文件中，default_popup js 文件将链接到 random.html 文件，如果单击该图标就会显示该文件。

"browser_action": {
"default_icon": "icon.png",
"default_title": "example extension"
"default_popup": "random.html"
}

对于我即将进行的项目，我正在尝试创建一个 google chrome 扩展程序，允许用户单击扩展程序图标以显示 default_pop html 文件，输入一些数据，并根据当前网页（或活动选项卡）上的元素计算一些结果）。

我担心的是我不明白 default_popup js 文件如何访问活动选项卡的内容。例如，使用 document.getElementById() 将查看random.html而不是实际的活动选项卡。我想知道 default_popup js 文件是否有一些方法可以从活动选项卡中读取/提取数据然后执行一些计算。

标签： javascripthtmlgoogle-chrome-extension

解决方案

访问网页 DOM：

  • 在 manifest.json 中声明内容脚本并使用消息传递

    chrome.tabs.sendMessage(integer tabId, any message, object options, function responseCallback)

向指定选项卡中的内容脚本发送一条消息，并在发回响应时运行可选的回调。runtime.onMessage在当前扩展的指定选项卡中运行的每个内容脚本中都会触发该事件。

来源：https ://developer.chrome.com/extensions/tabs#method-sendMessage

  • 用于注入内容脚本的 Tabs API

    chrome.tabs.executeScript(integer tabId, object details, function callback)

将 JavaScript 代码注入页面。有关详细信息，请参阅内容脚本文档的编程注入部分。

来源：https ://developer.chrome.com/extensions/tabs#method-sendMessage

推荐阅读