Chrome Extension: Extension is not injecting content script when devtools is opened - google-chrome

Question

Building a Chrome Extension that adds a devtools panel. That part is working. The dev tools panel needs to be able to grab information from the current page.
The only way I see how to do it, is using a content script. Ideally I don't want to require the "tabs" or "" permissions. I'm fine with them being optional permissions".
My content scripts that I inject only appear to work on the pages that I have specified in my manifest file. I want them to work on any page the user inspects so my panel can display information.
User clicks a button in panel - I request optional permissions for "tabs" and "" in my panel.js
my devtools page .js checks for "tabs" and "" permission.
If permission is granted, I send background.js a message - load this content script.
Recieving the message doesn't seem to matter on Background.js's end as the content script loads automatically regardless on URL's specified in the manifest. It does not however appear on pages you inspect.
CODE
(in order of how it was explained above)
Button in panel.html
<button id="load">Load Dev Info</button>
https://github.com/williamspiro/HubSpot-Developer-Extension/blob/c23b8cad6f1787264bb3e8b3673c594a7db5fe7e/panel.html#L8
Permission request in 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
permissions check if granted - sendMessage with content script name to background JS and devtools.js(loaded on 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
Receive message to background.js - inject content script
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
It appears the background JS part does not matter, because in manifest I have the content script mentioned in the manifest causing it to get injected on all URL's that match but not inspected pages.
Permissions and content scripts in 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
The content script I am trying to inject from the devtools is hsInspector.js
I only care to have this file get loaded if the devtools injects it. It doesn't need to load on the "matches" pages at all.
EXPECTED AND ACTUAL RESULTS
Expected result is that when inspecting a page, if you go to the extension's dev tools tab, and have the permissions required, the content script will be injected into the page.
[if that were working my goal would be to then make the content script do this]
Content script will be used to grab data from the page, message background.js the required data, background.js messages panel.js the data, panel js would render what it needs to in the panel.
Actual result: content script is not loading into the inspected page, but is instead loading onto the "matches" URLs specified under content_scripts.
If you have questions please ask. I am not an expert at building chrome extensions, so maybe I'm making this way more complicated than it needs to be. Really appreciate any help. Thank you in advance.