从后台javascript中修改html页面的DOM

本文介绍了从后台javascript中修改html页面的DOM的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

如何从后台脚本修改DOM html页面？该html页面存在于扩展的根文件夹中。当网页打开时，网址看起来像chrome-extension：//hffffemnacblbojccelnkhnafndfkhgc/block.html。

我的扩展程序中的文件树：

css / bootstrap-theme.css bootstrap-theme.css.map bootstrap-theme.min.css bootstrap.css bootstrap.css.map bootstrap.min.css popup.css 字体/ img / 128-128.png 检测到1413232635_virus 2.png 16-16.png 48-48.png js / block.js bootstrap.js bootstrap.min.js event.js jquery-1.11.1.js jquery.cookie.js block.html manifest.json popup.html

manifest.json <$ c $ manifest_version：2， name：Viper Security ATD，version：1.0，description ：Viper Security Advance Threat Defense，图标：{ 48：img / 48-48.png，128：img / 128-128.png}， browser_action：{default_icon：img / 16-16.png，default_title：Viper Security Advance Threat Defense，default_popup：popup.html ， background：{scripts：[js / jquery-1.11.1.js，js / event。 js]，persistent：true }， permissions：[< all_urls>，tabs ，webNavigation] }

解决方案

我想从后台JavaScript中修改我的扩展的HTML页面的dom。该页面存在于我的扩展程序的根目录中。该网页的网址如下所示：chrome-extension：//hffffemnacblbojccelnkhnafndfkhgc/block.html

从技术上讲，您可以这样做。

如果带有 block.html 的页面已打开，则后台页面可以获取对其<使用此代码的窗口对象：

var win = chrome.extension.getViews（tab）。filter（ function（w）{return w.location。路径名==/block.html} ）[0]; win.document.getElementById（foo）。value（bar）; //修改该页面 win.somefunc（）; //在该页面中调用全局函数 //等等

它可能是更清洁的但是，要使用消息并从后台脚本发送消息，这些消息将由每个 block.html 打开。

注意：你不能修改实际文件，你只能修改一个DOM打开文档。

How do I modify DOM html page from background script? The html page exists in the extension's root folder. When then page is opened the URL is looked like "chrome-extension://hffffemnacblbojccelnkhnafndfkhgc/block.html"

File tree in my extension:

css/ bootstrap-theme.css bootstrap-theme.css.map bootstrap-theme.min.css bootstrap.css bootstrap.css.map bootstrap.min.css popup.css fonts/ img/ 128-128.png 1413232635_virus detected 2.png 16-16.png 48-48.png js/ block.js bootstrap.js bootstrap.min.js event.js jquery-1.11.1.js jquery.cookie.js block.html manifest.json popup.html

manifest.json

{ "manifest_version": 2, "name": "Viper Security ATD", "version": "1.0", "description": "Viper Security Advance Threat Defence.", "icons": { "48": "img/48-48.png", "128": "img/128-128.png" }, "browser_action": { "default_icon": "img/16-16.png", "default_title": "Viper Security Advance Threat Defence", "default_popup": "popup.html" }, "background": { "scripts": ["js/jquery-1.11.1.js","js/event.js"], "persistent": true }, "permissions": [ "<all_urls>", "tabs", "webNavigation" ] }

解决方案

I want Modify dom of a HTML page of my extension from background javascript. The page exists on my extension's root. the page url looking like:chrome-extension://hffffemnacblbojccelnkhnafndfkhgc/block.html

Technically, you can do that.

If the page with block.html is open, the background page can get a reference to its window object with this code:

var win = chrome.extension.getViews("tab").filter( function(w) {return w.location.pathname == "/block.html"} )[0]; win.document.getElementById("foo").value("bar"); // Modify that page win.somefunc(); // Call a global function in that page // etc.

It is probably cleaner, however, to use Messaging and send messages from the background script that will be received by every block.html open.

Note: you can't modify the actual files, you can only modify the DOM of an opened document.