Hello all I am creating a Chrome Extension and I am having issues with injecting some JS into the page tab that the user is currently on.
I have a popup.html/.js files and a button within that:
popup.HTML:
<!doctype html> <html> <head> <title></title> <link rel="stylesheet" href="/css/bootstrap.min.css" /> <link rel="stylesheet" href="/css/jquery.nok.min.css" /> <link rel="stylesheet" href="/css/materialize.min.css" /> <link rel="stylesheet" href="/css/messagebox.min.css" /> <link rel="stylesheet" href="/css/options.css" /> <link rel="stylesheet" href="/css/style.css" /> <script src="/js/jQuery.js"></script> <script src="/js/popup.js"></script> <script src="/js/inject.js"></script> <script src="/js/loadingoverlay.min.js"></script> <script src="/js/jquery.nok.min.js"></script> <script src="/js/content.js"></script> </head> <body style="width: 335px; height: 55px;"> <div class="btn" id="injectIT_">Submit</div> </body> </html>
popup.JS:
document.addEventListener('DOMContentLoaded', function (dcle) {
$("#injectIT_").click(function() {
callInject();
});
});
Manifest.json:
{
"name" : "Blah Extention",
"version" : "11.17.2020",
"manifest_version" : 2,
"author" : "David",
"description" : "Blah Extention",
"options_page" : "/html/options.html",
"offline_enabled" : true,
"options_ui" : {
"page" : "/html/options.html",
"chrome_style" : true,
"open_in_tab" : true
},
"icons" : {
"16" : "/img/16j.png",
"48" : "/img/48j.png",
"128" : "/img/128j.png"
},
"background" : {
"scripts" : [ "/js/jQuery.js", "/js/background.js" ],
"persistent" : false
},
"browser_action" : {
"default_icon" : "/img/16jD.png",
"default_popup" : "/html/popup.html",
"default_title" : "Push this to start"
},
"web_accessible_resources" : [ "/img/*", "/js/*", "/css/*", "/html/*" ],
"content_scripts" : [ {
"matches" : [ "http://*/*", "https://*/*" ],
"all_frames" : true,
"run_at" : "document_idle",
"css" : [ "/css/messagebox.min.css", "/css/jquery.nok.min.css" ],
"js" : [ "/js/jQuery.js", "/js/content.js", "/js/messagebox.min.js",
"/js/jquery.nok.min.js", "/js/loadingoverlay.min.js", "/js/popup.js" ]
} ],
"content_security_policy" : "script-src 'self' 'unsafe-eval'; object-src 'self';",
"permissions" : ["http://*/", "https://*/", "file:///*/*", "storage", "tabs", "declarativeContent", "activeTab", "debugger", "downloads", "notifications", "unlimitedStorage", "contextMenus", "cookies", "webRequestBlocking", "nativeMessaging", "identity", "clipboardWrite"
]
}
background.JS:
...[more js code here]
chrome.runtime.onMessage.addListener(function(request,sender,sendResponse){
if(request.message == 'Test')
console.log('Got message');
chrome.tabs.executeScript(null, { file: "/js/inject.js" }, function() {
console.log("injected!");
});
});
...[more js code here]
content.JS:
chrome.runtime.sendMessage({ "message": "Test" });
inject.JS:
function callInject() {
var t = "14774123",
a = "qtest",
l = "Rule",
...[more js code here]
};
When I click on the icon and the popup shows I hit the button. Nothing happens an there are no errors.
What I am wanting it to do is inject the JS into that current page and proceed with the js function that’s inside the inject.js file.
Can anyone spot what I am doing incorrectly here?
Advertisement
Answer
review your logs
when you are saying no errors.. you might only looked into the DOM logs but you can also get the background script logs too which will show you your errors.
to review the background script logs, go to: chrome://extensions/ enable developer mode toggle in the top right corner hit the “inspect views: background page”
code fixes
when I run your code, the issue for me was the “null” parameter in the chrome.tabs.executeScript function, the null is for the activetab but when you load the extension from the chrome://extensions/ the activetab at that moment of time is actually the chrome://extensions/
to solve this I looped through all the tabs and looked into the tab that has the url popup.html and only injected to that tab. did you check both the DOM logs and the background page logs ?
manifest.json
{
"name" : "Blah Extension",
"version" : "11.17.2020",
"manifest_version" : 2,
"author" : "David",
"description" : "Blah Extension",
"options_ui" : {
"chrome_style" : true,
"open_in_tab" : true
},
"background" : {
"scripts" : [ "js/background.js" ],
"persistent" : false
},
"browser_action" : {
"default_title" : "Push this to start"
},
"content_scripts" : [
{
"matches" : [ "http://*/*", "https://*/*", "file://*/*" ],
"all_frames" : true,
"run_at" : "document_end",
"js" : [ "js/content.js", "js/inject.js" ]
}
],
"permissions" : [
"<all_urls>",
"tabs"
]
}
js/background.js
chrome.tabs.query({}, function(tabs) {
for (var i=0; i<tabs.length; ++i) {
console.log(tabs[i].url);
if (tabs[i].url.indexOf("popup.html") > 0)
chrome.tabs.executeScript(tabs[i].id, {file: "js/inject.js", allFrames: true});
}});