当用户单击浏览器按钮时更改DOM的Chrome扩展

当用户单击浏览器按钮时更改DOM的Chrome扩展,dom,google-chrome-extension,Dom,Google Chrome Extension,我正在尝试对Chrome进行扩展,以更改网页中出现的所有名称。(例如,如果页面上有“that”一词,它会将其更改为另一个名称) 想法是在用户单击浏览器按钮时进行此更改 我的问题是它没有做出改变!我不知道我做错了什么 下面是manifest.json: { "name": "App Name", "description": "App description", "version": "1.0", "background": { "scripts": ["jquery.mi

我正在尝试对Chrome进行扩展,以更改网页中出现的所有名称。(例如,如果页面上有“that”一词,它会将其更改为另一个名称)

想法是在用户单击浏览器按钮时进行此更改

我的问题是它没有做出改变!我不知道我做错了什么

下面是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;
 }
}
Chrome版本:Windows 7上的23.0.1271.95 m 谢谢大家!

案例1)

你的background.js在它的世界中执行代码,背景页面是在扩展过程中运行的HTML页面。它在扩展的生命周期内存在,并且一次只有一个实例处于活动状态

因此,所有代码都试图更改
background.html
页面中出现的所有名称

您可以使用相同的代码实现您的功能

演示

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

您已经为所有facebook URL的
“匹配项”完全注入了脚本:[”http://www.facebook.com/*“],
而不是,所以它起作用了,不是因为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"
   }
   ]
}

如果您需要更多信息,请告诉我。

谢谢!是的,我错过了那一点。然而,这有点尴尬,但我还是不能让它工作。我这样做了:chrome.browserAction.onClicked.addListener(函数(tab){chrome.tabs.executeScript(null,{file:'content.js});});文件中的代码似乎没有运行。但不管怎样,我只是把它贴在这里给你一个反馈。再次感谢!:Dok,您忘了注册后台页面以显示如下内容:{“scripts”:[“background.js”]},