Создание расширения 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, поэтому, возможно, я делаю этот способ более сложным, чем нужно.Очень ценю любую помощь.Заранее спасибо.