Изменение содержимого DOM с расширением Chrome

Ответ 1

Вам нужно использовать этот запрос для отправки данных в DOM с текущей просматриваемой вкладки.

    chrome.tabs.executeScript(null, {
        code: 'var config = ' + JSON.stringify(getKeywords)
    }, function() {
        chrome.tabs.executeScript(null, {file: 'custom.js'});
    });

а в файле custom.js вы можете написать функцию, которую вы хотите применить к элементу DOM. например, если вы хотите скрыть что-то, чем вам нужен этот запрос в custom.js. Поэтому, если вы хотите использовать этот пример, вам нужно будет изменить его в соответствии с вашими требованиями.

var all = document.getElementsByTagName("div");
var searchValue=config.toString().split(',');
alert('Example:' + searchValue[0]);
for(j=0; j < searchValue.length; j++) {
for(i=0; i < all.length; i++) {
    if(all[i].innerHTML.indexOf(searchValue[j]) > -1){
    all[i].innerHTML = ""
    }
}
}

Ответ 2

Я пытаюсь ответить на этот вопрос так же просто, как и раньше, потому что, делая меньше изменений в коде, вы быстро научитесь следовать за ним.

Обычно я пишу следующие строки кода, когда конечный пользователь нажимает кнопку START при всплывании (см. ваш popup.js):

chrome.runtime.sendMessage({key: 'popupInit'}, function (response) {
 ;
});
window.close();  // this line closes the popup

Что очень важно, так это понять, что ответ - это не система связи, а просто ответ на лету, поступающий от соответствующего слушателя. Слушателем для меня является background.js. В этом файле вы можете воспользоваться преимуществами localStorage, чтобы иметь что-то вроде:

chrome.tabs.onUpdated.addListener(function(tabid, changeInfo, tab) {
  if (typeof changeInfo.status == 'string' && changeInfo.status == 'complete') {
    chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
      var keyString = JSON.parse(localStorage.getItem('keyWords'));
      chrome.tabs.sendMessage(tabs[0].id, {key: 'init', wordToHide: keyString}, function (response) {
        ;
      });
    });
  }
});

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  var rq = request.key;
  if (rq != undefined && typeof rq == 'string') {
    switch (rq) {
      case 'popupInit':
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
          var keyString = JSON.parse(localStorage.getItem('keyWords'));
          chrome.tabs.sendMessage(tabs[0].id, msgToSend, function(response) {
            ;
          });
        });
        break;
    }
  }
});

Chrome.tabs.onUpdated.addListener важен, потому что каждый раз, когда обновляется текущая текущая страница, вы можете отправить сообщение в контент script, получая значения из localstorage, то же самое происходит, когда всплывающее окно закрывается, и если есть слова в localstorage, вы можете использовать chrome.runtime.onMessage.addListener для прослушивания сигнала: всплывающее окно закрывается, поэтому запустите работу в контенте script, отправив ему сообщение с массивом слов.

Теперь посмотрим на ваш файл content.js.

// Listen for messages from the backgound.js
chrome.runtime.onMessage.addListener(function (msg, sender, response) {
  // First, validate the message structure
  if ((msg.key === 'init') && (Object.prototype.toString.call(msg.wordToHide) === '[object Array]')) {

    var elements = document.querySelectorAll("body, body *");
    var results = [];
    var child;
    var regwordToHide = [];
    if (msg.wordToHide.length > 0) {
      msg.wordToHide.forEach(function(element, index, array) {
        regwordToHide.push(new RegExp('\\b' + element + '\\b', 'g'));
      });
    }
    for(var i = 0; i < elements.length; i++) {
      child = elements[i].childNodes[0];
      if (elements[i].hasChildNodes() && child.nodeType == 3) {
        var nodeStr = child.textContent;
        if (nodeStr.trim().replace(/\n\r\t/g, '').length > 0 && nodeStr.trim().charAt(0) != '<') {
          regwordToHide.forEach(function(element, index, array) {
            nodeStr = nodeStr.replace(element, '');
          });
          child.textContent = nodeStr;
        }
      }
    }
    document.getElementsByTagName("html")[0].style.visibility = "visible";
  }
});
document.getElementsByTagName("html")[0].style.visibility = "hidden";

Я пытаюсь скрыть всю страницу: обратите внимание на это, потому что это может быть сложно (помните, что конечный пользователь всегда должен видеть что-то во время загрузки страницы...).

После этого content.js ждет сообщения, исходящего из фона, и когда это произойдет, содержимое script начнет свою работу! Это все.

Извините за путаницу в моем письме. Если вам нужна какая-то другая помощь, дайте мне знать. Я проверил ваш ext и исправил его в местах, которые вы можете видеть.

Для связи между компонентами в хромовом расширении необходимо помнить:

• фон - это большой слушатель
• Взаимодействие с фоном
• фон общается с контентом

Чтобы отправлять/получать сообщения, вы можете взглянуть на сообщения Chrome

• функция chrome.runtime.sendMessage({greeting: "hello" }, function (response) { console.log(response.farewell); }); отправляется
• chrome.runtime.onMessage.addListener - это сервер (получатель)

Отправка ответа и ответ используются только для проверки "на лету" относительно связи: что-то вроде: Привет → Хорошо, я понял, Теперь я продолжаю сам.

Я также заполнил слово, заменяющее часть!

Ответ 3

Вам следует отправить команду из background.js или popup.js, получив ее и изменив dom в content.js. Следующий код демонстрирует простой сценарий: Нажмите кнопку browserAction и добавьте div на текущую страницу. Вы можете использовать ту же логику для отображения/скрытия любых элементов.

manifest.json

{
  "name": "Test",
  "version": "1.0",
  "permissions": [
    "tabs"
  ],
  "description": "Test",
  "background": {
    "persistent": false,
    "scripts": [
      "background.js"
    ]
  },
  "content_scripts": [
    {
      "matches": [
        "*://*/*"
      ],
      "js": [
        "content.js"
      ],
      "run_at": "document_end",
      "all_frames": true
    }
  ],
  "browser_action": {
    "title": "Test"
  },
  "manifest_version": 2
}

background.js

chrome.browserAction.onClicked.addListener(function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {command: "append"}, function(response) {
            console.log(response.result);
        });
    });
});

content.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)    {
    console.log(request.command);

    var div = document.createElement('div');
    var label = document.createElement('span');
    label.textContent = "Hello, world";
    div.appendChild(label);
    document.body.appendChild(div);

    sendResponse({result: "success"});
});