Расширение Chrome: расширение не внедряет скрипт содержимого при открытии devtools - PullRequest
0 голосов
/ 01 февраля 2019

Создание расширения Chrome, которое добавляет панель devtools.Эта часть работает.Панель инструментов разработчика должна иметь возможность получать информацию с текущей страницы.

Единственный способ, которым я вижу, как это сделать, - использовать скрипт контента.В идеале я не хочу требовать "вкладки" или "" разрешения.У меня все в порядке с дополнительными разрешениями ".

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

Пользователь нажимает кнопку на панели - я запрашиваю необязательные разрешения для «вкладок» и «» в моей панели. js

моя страница devtools проверяет наличие »разрешения "и" на вкладках. Если разрешение предоставлено, я отправляю background.js сообщение - загрузите этот скрипт контента.

Получение сообщения не имеет значения на конце Background.js, так как скрипт контента загружаетсяавтоматически независимо от URL-адреса, указанного в манифесте. Однако он не отображается на проверяемых вами страницах.

КОД (в порядке, описанном выше)

Кнопка в panel.html <button id="load">Load Dev Info</button>https://github.com/williamspiro/HubSpot-Developer-Extension/blob/c23b8cad6f1787264bb3e8b3673c594a7db5fe7e/panel.html#L8

Запрос на разрешение в Panel.js

document.querySelector('#load').addEventListener('click', function(event) {
    // Permissions must be requested from inside a user gesture, like a button's
    // click handler.
    chrome.permissions.request({
      permissions: ['tabs'],
      origins:['<all_urls>']
    }, function(granted) {
      // The callback argument will be true if the user granted the permissions.
      if (granted) {
       console.log("Perm granted");


      } else {
        console.log("Perm denied");
      }
    });
  });

https://github.com/williamspiro/HubSpot-Developer-Extension/blob/c23b8cad6f1787264bb3e8b3673c594a7db5fe7e/panel.js#L2-L18

проверка разрешений, если предоставлено - sendMessage с именем сценария содержимого для background JS и devtools.js (загружено в devtools.html)

name: "devtools-page"
});


backgroundPageConnection.onMessage.addListener(function (message) {
// Handle responses from the background page, if any
});


console.log("devtools.js ran");








chrome.permissions.contains({
    permissions: ['tabs'],
    origins: ['<all_urls>']
    }, function(result) {
    if (result) {
        // The extension has the permissions.
        // Relay the tab ID to the background page
        chrome.runtime.sendMessage({
            tabId: chrome.devtools.inspectedWindow.tabId,
            scriptToInject: "hsInspector.js"
        });
    } else {
        // The extension doesn't have the permissions.


    }
}); 

https://github.com/williamspiro/HubSpot-Developer-Extension/blob/c23b8cad6f1787264bb3e8b3673c594a7db5fe7e/devtools.js#L7-L35

Получить сообщение для background.js - внедрить скрипт содержимого

chrome.runtime.onConnect.addListener(function(devToolsConnection) {
    // assign the listener function to a variable so we can remove it later
    var devToolsListener = function(message, sender, sendResponse) {
        // Inject a content script into the identified tab
        console.log("script:",message.scriptToInject);
        chrome.tabs.executeScript(message.tabId,
            { file: message.scriptToInject });
    }
    // add the listener
    devToolsConnection.onMessage.addListener(devToolsListener);

    devToolsConnection.onDisconnect.addListener(function() {
         devToolsConnection.onMessage.removeListener(devToolsListener);
    });
});

https://github.com/williamspiro/HubSpot-Developer-Extension/blob/c23b8cad6f1787264bb3e8b3673c594a7db5fe7e/background.js#L38-L52

Кажется, что фоновая часть JS не имеет значения, потому что в манифесте у меня есть упомянутый в манифесте скрипт содержимого, заставляющий его вставляться во все URL, которые соответствуют, но не проверены на страницах.

Разрешения и скрипты содержимого в manifest.json

    "permissions": [
        "storage",
        "activeTab"
    ],
    "optional_permissions": [
        "https://app.hubspot.com/*",
        "https://app.hubspotqa.com/*",
        "tabs",
        "<all_urls>"
    ],
    "web_accessible_resources": [
        "mac-text-cursor.svg",
        "mac-text-cursor.png"
    ],
    "content_scripts": [{
        "run_at": "document_idle",
        "js": ["jquery-3.2.1.min.js", "design-manager.js","hsInspector.js"],
        "css": ["hsDarkIde.css"],
        "document_idle": "document_start",
        "matches": ["https://app.hubspot.com/*", "https://app.hubspotqa.com/*"]
    }],
    "content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",

https://github.com/williamspiro/HubSpot-Developer-Extension/blob/66ee912d56b88be052182a91257af28a4e356558/manifest.json#L25-L46

Сценарий содержимого, который я пытаюсь внедрить из devtools, - это hsInspector.js

Iтолько загружайте этот файл, если devtools внедряет его.Он вообще не должен загружаться на страницах «совпадений».

ОЖИДАЕМЫЕ И АКТУАЛЬНЫЕ РЕЗУЛЬТАТЫ

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

[если бы это работало, моей целью было бы сделать так, чтобы скрипт контента делал это] Скрипт контента будет использоваться для получения данных со страницы, сообщения background.js необходимые данные, панели сообщений background.js.js данные, панель js отобразит то, что ей нужно на панели.

Фактический результат: скрипт содержимого не загружается на проверяемую страницу, а вместо этого загружается в URL-адреса "совпадений", указанные в content_scripts.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...