Код сценария содержимого не выполняется

Question

Я посмотрел на другие связанные SO сообщения, и решения не помогли решить мою проблему.Это мое первое расширение Chrome, поэтому, пожалуйста, потерпите меня!

Я пишу простое расширение Chrome, которое ищет ключевые слова, предоставленные пользователем на веб-странице.Я не могу запустить скрипт контента, который возвращает контент DOM.Часть кода, которую я взял из ответа в другом SO сообщении, но я не могу заставить его работать на меня.

Я поместил console.log ("hello world") вверхняя часть файла, и она не отображается, поэтому я думаю, что это может быть структура моего проекта.

manifest.json

{
    "name": "keyword search",
    "version": "0.0.1",
    "manifest_version": 2,
    "permissions": [ "tabs" , "storage", "activeTab", "<all_urls>"],
    "browser_action": {
        "default_popup": "html/form.html"
    },
    "content_scripts": [{
        "matches": [ "<all_urls>" ],
        "js": [ "js/jquery.min.js", "content_scripts/content_script.js" ]
    }],
    "homepage_url": "http://google.com/"
}

js / popup.js

function run() {
    running = true;
    console.log('running');

    var url = "https://www.stackoverflow.com/"

    // Get KW & category for search
    chrome.storage.local.get(["kw"],
        function (data) {
            kw = data.kw;

            console.log("redirecting to find kw: " + kw);

            // Send current tab to url
            chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
                chrome.tabs.update(tabs[0].id, {url: url});

                chrome.tabs.sendMessage(tabs[0].id, {type: 'DOM_request'}, searchDOM);
            });
        }
    );
}

function searchDOM(domContent) {
    console.log("beginning dom search \n" + domContent);
}

content_scripts / content_script.js

// Listen for messages
console.log("hello world")
chrome.runtime.onMessageExternal.addListener(function (msg, sender, sendResponse) {
    // If the received message has the expected format...
    if (msg.type === 'DOM_request') {
        // Call the specified callback, passing
        // the web-page's DOM content as argument
        sendResponse(document.all[0].outerHTML);
    }
});

консоль

running
redirecting to find kw: TestKeyword
beginning dom search 
undefined

Answer 1

Во-первых, onMessageExternal - это неправильное событие (это для внешнего обмена сообщениями ):
вы должны использовать стандарт onMessage.

Во-вторых, API расширений Chrome является асинхроннымпоэтому он регистрирует только задание и немедленно возвращается к следующему выражению в вашем коде, не дожидаясь завершения задания:

1. chrome.tabs.update ставит в очередь переход к новому URL-адресу
2. chrome.tabs.sendMessage ставит в очередь задание на отправку сообщения
3. текущий контекст страницы на вкладке уничтожается вместе с запущенными сценариями содержимого
4. вкладка начинает загружать новый URL
5. сообщение доставляется во вкладку, но слушателей нет,
   но вместо этого этот шаг может выполняться сразу после шага 2, в зависимости от различных факторов, поэтому скрипт содержимого, запущенный на старой странице, получит его, а не то, что выхотите
6. вкладка загружает обслуживаемый HTML и генерирует событие DOMContentLoaded
7. , после которого ваши скрипты контента запускаются вскоре из-заult "run_at": "document_idle"

---

Существует как минимум три способа для правильного определения времени всего этого:

• сделать свой контентскрипт отправляет сообщение и добавляет прослушиватель onMessage во всплывающем окне
• , используя chrome.tabs.onUpdated, чтобы дождаться загрузки вкладки
• , используйте chrome.tabs.onUpdated + chrome.tabs.executeScript дляупростить все это

Давайте возьмем подход executeScript.

1. удалить "content_scripts" из manifest.json

2. вместо chrome.tabs.query (он не нужен) используйте следующее:

   chrome.tabs.update({url}, tab => {
     chrome.tabs.onUpdated.addListener(function onUpdated(tabId, change, updatedTab) {
       if (tabId === tab.id && change.status === 'complete') {
         chrome.tabs.onUpdated.removeListener(onUpdated);
         chrome.tabs.executeScript(tab.id, {
           code: 'document.documentElement.innerHTML',
         }, results => {
           searchDOM(results[0]);
         });
       }
     });
   });