chrome расширение браузера. Действия браузера конфликтуют с onClick. - PullRequest
Новая
       84

chrome расширение браузера. Действия браузера конфликтуют с onClick.

0 голосов
/ 16 апреля 2020

Использование React и попытка создать расширение для браузера chrome, которое будет:
1. Открывать всплывающее окно (с маршрутами реакции и представлениями) при нажатии кнопки расширения
2. Когда кнопка внутри щелкнуло всплывающее окно, я хотел бы извлечь информацию из активной вкладки браузера DOM

Когда я добавляю это в манифест: 

"browser_action": {"default_popup": "index.html"}

Всплывающее окно открывается, и я могу взаимодействовать с разные страницы во всплывающем окне.

Затем я попытался использовать возможности содержимого и фона, добавил это в манифест. json: 

"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],

  "background": {
    "scripts": ["background.js"]
  }

content. js file: 

/*global chrome*/
console.log("CHROME EXTENSION -- content.js running")
chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message, sender, sendResponse) {
    console.log(message.txt);
    if (message.txt === "hello") {
        let paragraphs = document.getElementsByTagName('p');
        for (let elt of paragraphs) {
            elt.style['background-color'] = '#FF00FF';
        }
    }
}

background. js file: 

/*global chrome*/
console.log("CHROME EXTENSION -- background.js running")

// LOCATION A

chrome.browserAction.onClicked.addListener(buttonClicked);

function buttonClicked(tab) {
    console.log("CLICKED !!!");
    console.log(tab);
    let msg = {
        txt: "hello"
    }
    chrome.tabs.sendMessage(tab.id, msg)
    // LOCATION B
}

Я также читал это о browserAction.onClicked: Запускается при нажатии значка действия браузера. Это событие не сработает, если действие браузера имеет всплывающее окно.

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

Без установленного в манифесте всплывающего окна, я нажимаю кнопку расширения, и я могу изменить активную DOM браузера и, вероятно, отправить обратно элементы, которые я имею интересует (еще не пробовал), но всплывающее окно и мое приложение реакции не будут отображаться.

С помощью всплывающего окна, установленного в манифесте, я могу использовать всплывающие представления и созданное мной GUI, но у меня нет подключения к активной DOM браузера.

Я также пытался внедрить это в нескольких местах в фоновом режиме. js: 

chrome.browserAction.setPopup({popup: 'index.html'});

Когда я установил в LOCATION A - он работает как всплывающее окно устанавливается через файл манифеста.
Когда я устанавливаю его в LOCATION B - он запускает код до тех пор, пока я не установлю всплывающее окно - поэтому я вижу вкладку, но я не получаю сообщения от DOM (поэтому после этого открывается всплывающее окно, любой щелчок по нему будет просто открытие / закрытие всплывающего окна без дальнейшего отправки / получения сообщения)

Итак ... С тех пор я пытаюсь найти решение.

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

В ответе по второй ссылке, в частности, «причудливое» решение невозможно, поскольку Array.observe устарел. «Правильное» решение - я просто недостаточно понимаю (pcTabs?)

И я изучил chrome.browserAction.openPopup, но я не понимаю этого достаточно.

Как я могу сделать и то, и другое?

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

...