백그라운드 자바 스크립트에서 html 페이지의 DOM 수정

Question

백그라운드 스크립트에서 DOM html 페이지를 어떻게 수정합니까? 확장 페이지의 루트 폴더에 html 페이지가 있습니다. 내 확장에서 "//hffffemnacblbojccelnkhnafndfkhgc/block.html 크롬 확장"

파일 트리 : 다음 페이지가 열릴 때 URL은 모습입니다

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" 
    ] 
} 

Answer 1

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

기술적으로 그렇게 할 수 있습니다. block.html있는 페이지가 열려있는 경우

, 배경 페이지 this code과의 window 객체에 대한 참조를 얻을 수 있습니다 :

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. 

그것은 아마 깨끗하지만, 배경 스크립트에서 메시지를 Messaging을 사용하여 보내 모든 block.html에 의해 수신됩니다.

참고 : 실제 파일을 수정할 수는 없으며 열려있는 문서의 DOM 만 수정할 수 있습니다.