사용자가 브라우저 버튼을 클릭 할 때 DOM을 변경하는 Chrome 확장자

Question

Chrome의 확장 프로그램을 사용하여 웹 페이지에서 이름의 모든 변경 사항을 변경하려고합니다. 예를 들어 페이지에 단어 "그"가 있으면 다른 이름으로 바뀝니다.

아이디어는 사용자가 브라우저 버튼을 클릭 할 때 변경되도록하는 것입니다.

내 문제는 변경하지 않는다는 것입니다. 나는 내가 무엇을 잘못하고 있는지 전혀 모른다.

여기 manifest.json을이다 :

{ 
    "name": "App Name", 
    "description": "App description", 
    "version": "1.0", 
    "background": { 
    "scripts": ["jquery.min.js", "jquery.ba-replacetext.min.js","background.js"] 
    }, 
    "permissions": [ 
    "tabs", "http://*/*", "https://*/*" 
    ], 
    "browser_action": { 
     "default_title": "App name", 
     "default_icon": "icon.png" 
    }, 
    "manifest_version": 2 
} 

그리고 여기 background.js있어 :

나는 브라우저 버튼에 클릭하지 않고 페이지를 변경하고 작동을했다

chrome.browserAction.onClicked.addListener(function(tab) { 
    var state = document.readyState; 
    var carregou = false; 
    var matches = document.body.innerText.match(regex); 

if (state == "interactive"|| (!carregou)){ 
$("body *").replaceText(/That/gi, ""); 
var regex = /That/gi; 
matches = document.body.innerText.match(regex); 
if(matches){ 
    alert("Reload the page (f5)"); 
}else{ 
    alert("All changes done! :D"); 
    carregou = true; 
} 
} 
}); 

. 여기 코드는 다음과 같습니다

{ 
    "name": "App Name", 
    "version": "1.0", 
    "manifest_version": 2, 
    "description": "App description.", 
    "content_scripts": [ 
    { 
    "matches": ["http://www.facebook.com/*"], 
    "js": ["jquery.min.js","jquery.ba-replacetext.min.js", "script.js"], 
    "run_at": "document_end" 
    } 
    ] 
} 

sript.js :

var state = document.readyState; 
var carregou = false; 
var matches = document.body.innerText.match(regex); 
if (state == "interactive"|| (!carregou)){ 
$("body *").replaceText(/That/gi, ""); 
var regex = /That/gi; 
matches = document.body.innerText.match(regex); 
if(matches){ 
    alert("Reload the pahe (f5)"); 
}else{ 
    alert("All changes done! :D"); 
    carregou = true; 
} 
} 

크롬 버전 : 윈도우 7 에 23.0.1271.95 m 감사합니다!

Answer 1

사례 1)

귀하의 background.js, 그 own generated html page 세계에서 s the architecture overview explains 코드를 실행, 배경 페이지가 확장 프로세스에서 실행되는 HTML 페이지입니다. 확장 프로그램의 수명 동안 존재하며 한 번에 하나의 인스턴스 만 활성화됩니다.

따라서, 모든 코드는 동일한 코드를 사용하여

당신은 Programmatic injection와 기능을 달성 할 수있는 background.html 페이지의 변화에 ​​이름의 모든 발생을하려고

데모

/* in background.html */ 
chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.executeScript(null, 
          {code:"document.body.bgColor='red'"}); 
}); 

사례 2)

당신은 완전히에 대한 스크립트를 주입 한 모든 페이스 북의 URL의 "matches": ["http://www.facebook.com/*"], 대신 Programmatic injection의, 그것은 당신의 manifest.json에,하지 없기 때문에 browser action의 일 때문에

{ 
    "name": "App Name", 
    "version": "1.0", 
    "manifest_version": 2, 
    "description": "App description.", 
    "content_scripts": [ 
    { 
    "matches": ["http://www.facebook.com/*"], 
    "js": ["jquery.min.js","jquery.ba-replacetext.min.js", "script.js"], 
    "run_at": "document_end" 
    } 
    ] 
} 

하면 자세한 정보가 필요하면 알려주세요.