从后台javascript中修改html页面的DOM [英] Modifying DOM of a html page from background javascript

问题描述

如何从后台脚本修改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.

                        
这篇关于从后台javascript中修改html页面的DOM的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！