Chrome-Erweiterung zum Ändern des DOM, wenn der Benutzer auf die Schaltfläche im Browser klickt

Question

Ich versuche, eine Erweiterung für Chrome zu erstellen, die alle Vorkommen eines Namens auf der Webseite ändert. (Zum Beispiel, wenn die Seite das Wort "das" hat, ändert es in einen anderen Namen).

Die Idee ist, diese Änderung vorzunehmen, wenn der Benutzer auf die Browser-Schaltfläche klickt.

Mein Problem ist, dass er die Änderungen nicht vornimmt! Ich habe keine Ahnung, was ich falsch mache.

Hier ist die 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
}

Und hier ist die 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;
 }
}
});

Ich habe ein Programm erstellt, das die Seite wechselt, ohne auf die Schaltfläche im Browser zu klicken, und es funktioniert. Hier ist der Code:

{
  "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;
 }
}

Chrome Version: 23.0.1271.95 m auf Windows 7 Dankeschön!

Answer 1

Fall 1)

Ihre background.js führt den Code in ihrer selbst erstellte html-Seite Welt, A Die Architekturübersicht erklärt Die Hintergrundseite ist eine HTML-Seite, die während des Erweiterungsprozesses läuft. Sie existiert für die gesamte Lebensdauer Ihrer Erweiterung, und es ist immer nur eine Instanz von ihr aktiv.

Der gesamte Code versucht also, alle Vorkommen eines Namens in der background.html ページ

Sie können Ihre Funktionalität erreichen mit Programmatische Injektion mit gleichem Code

Demonstration

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

Fall 2)

Sie haben das Skript für alle Facebook-URLs vollständig injiziert "matches": ["http://www.facebook.com/*"], anstelle von Programmatische Injektion Es hat also funktioniert, nicht weil es keine Browser-Aktion in Ihrer manifest.json

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

Lassen Sie mich wissen, wenn Sie weitere Informationen benötigen.