Question

现在，我有一个应用程序，它始终运行content.js脚本，并用不同的图像替换浏览器中可以找到的所有图像。我想这样做只有在您实际点击扩展程序的图标时才会发生这种情况。

这是我的manifest.json：

{
"manifest_version": 2,
    "name": "Unicorn",
    "description": "changes images and words to unicorn related ones",
    "version": "1.0",
    "content_scripts": [
        {
            "matches": [
                "*://*/*"
            ],
            "js": [
                "content.js"
            ],
            "run_at": "document_end"
        }
    ],
    "browser_action": {
      "default_title": "Unicorn"
    }

}

这是content.js：

chrome.browserAction.onClicked.addListener(function (tab) { //should be fired when User Clicks ICON

var elements = document.getElementsByTagName('*');
for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
      if(isImage(element)){

        element.src="http://67.media.tumblr.com/30b1b0d0a42bca3759610242a1ff0348/tumblr_nnjxy1GQAA1tpo3v2o1_540.jpg";
     }
    for (var j = 0; j < element.childNodes.length; j++) {
        var node = element.childNodes[j];

        if (node.nodeType === 3) {
            var text = node.nodeValue;

            var replacedText = text.replace(/wild/gi, 'rainbow bright');

            if (replacedText !== text) {
                element.replaceChild(document.createTextNode(replacedText), node);
            }
        }
    }
}
});


function isImage(i) {
    return i instanceof HTMLImageElement;
}

没有行chrome.browserAction.onClicked.addListener(function (tab) {及其右括号，这样可以正常工作。我在这里错过了什么？

Answer 1

浏览器操作点击处理程序应移至背景上下文才能生效，然后您可以向当前标签发送消息。

的manifest.json

{
  "manifest_version": 2,
  "name": "Unicorn",
  "description": "changes images and words to unicorn related ones",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": [
        "*://*/*"
      ],
      "js": [
        "content.js"
      ],
      "run_at": "document_end"
    }
  ],
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "browser_action": {
    "default_title": "Unicorn"
  }
}

background.js

chrome.browserAction.onClicked.addListener(function (tab) {
  chrome.tabs.sendMessage(tab.id, {
    method: 'showImages'
  });
});

content.js

function showImages() {
  var elements = document.getElementsByTagName('*');
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    if (isImage(element)) {

      element.src = "http://67.media.tumblr.com/30b1b0d0a42bca3759610242a1ff0348/tumblr_nnjxy1GQAA1tpo3v2o1_540.jpg";
    }
    for (var j = 0; j < element.childNodes.length; j++) {
      var node = element.childNodes[j];

      if (node.nodeType === 3) {
        var text = node.nodeValue;

        var replacedText = text.replace(/wild/gi, 'rainbow bright');

        if (replacedText !== text) {
          element.replaceChild(document.createTextNode(replacedText), node);
        }
      }
    }
  }
}

function isImage(i) {
  return i instanceof HTMLImageElement;
}

// Message handler
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.method === 'showImages') {
    showImages();
  }
});

无法将chrome扩展程序content.js设置为仅在单击图标时有效？

1 个答案: