I have an object WIO on a webpage which i want to access in my chrome extension. I have followed this example and injected my script.js in the page using first method.
I can successfully read WIO object in script.js. But the problem is i can't access it in popup.html.
Any suggestions will be great appreciated.
Here is manifest.json
{
"manifest_version": 2,
"name": "Campaign Analyzer",
"description": "Analyze campaign data",
"version": "0.1",
"icons": { "128": "icon_128.png" },
"browser_action": {
"default_popup": "popup.html"
},
"permissions": ["activeTab", "<all_urls>"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["jquery-3.4.1.min.js", "inject.js"]
}
],
"web_accessible_resources": ["script.js"]
}
inject.js
s.src = chrome.runtime.getURL("script.js");
s.onload = function() {
this.remove();
};
(document.head || document.documentElement).appendChild(s);
script.js
setTimeout(function() {
console.log(WIO.sessionInfo.context);
}, 6000);
Related
Manifest.json
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html",
"default_icon": {
"32": "icons/32x32.png"
}
},
"content_scripts": [
{
"matches": ["*://*/*"],
"run_at": "document_start",
"js": ["content-script.js"]
}
],
"permissions": [
"scripting",
"tabs",
"notifications",
"activeTab",
"webRequest"
],
"host_permissions": ["*://*/*", "https://*/*"],
"web_accessible_resources": [
{
"matches": ["*://*/*", "http://*/*", "https://*/*"],
"resources": ["web.js"]
}
],
"icons": {
"32": "/icons/32x32.png"
}
}
content-script.js
console.log("I am content script");
function injectScript() {
var script = document.createElement("script");
script.src = chrome.runtime.getURL("scripts/web.js");
script.type = "text/javascript";
console.log("Inserting Script", document);
document.head.appendChild(script);
}
injectScript();
web.js
console.log("I am web.js");
setInterval(() => {
console.log(window.test, "Test in setInterval");
}, 1000);
console.log(window.test, "Logging test from web.js");
// document.body.style.backgroundColor = "red";
Upon refreshing the page I am getting the following error
Not able to get what could be the issue, can someone guide me?
Thank You!
Even after searching a lot of topics in stack overflow, nothing helped me to fix this error...
I'm trying to create an extension, and for now there are simple codes in it, but unfortunately, the console is not logging 'Hello, world!' from the content_scripts file.
manifest.json
{
"manifest_version": 2,
"name": "Example",
"shortname": "exmpl",
"description": "__MSG_appDesc__",
"version": "0.0.1",
"default_locale": "en",
"author": "Mateus Akino",
"icons": {
"16": "i16x.png",
"48": "i48x.png",
"128": "i128x.png"
},
"homepage_url": "http://example.com/",
"browser_action": {
"default_icon": "i32x.png",
"default_popup": "popup.html"
},
"update_url": "http://example.com/update.xml",
"chrome_url_overrides": {
"newtab": "newtab.html"
},
"content_scripts": [{
"matches": ["*://*.youtube.com/*"],
"js": ["execute.js"],
"run_at": "document_end"
}],
"background": {
"scripts": ["background.js"]
},
"permissions": [
"activeTab", "tabs", "i18n", "management", "webNavigation", "<all_urls>"
]
}
execute.js
console.log("Hello, world!");
background.js
chrome.webNavigation.onHistoryStateUpdated.addListener(function (details) {
chrome.tabs.executeScript(null, {
file: "execute.js"
});
});
I fixed the problem, so I'm posting it here if someone else has the same issue.
Looks like the code was fine, the problem was the way I was loading the extension...
As I'm using 'Load unpacked extension', my manifest.json wasn't updating just by disabling and enabling it (neither by using Refresh extensions now).
So I removed the extension, loaded it again and it's working normally now.
I'm trying to make a Google chrome extension that injects a script upon clicking the extension icon. However, i want the same script to be injected whenever I load/go to another page, without having to click on the extension icon again.
background.js
chrome.browserAction.onClicked.addListener(function (tab) {
if (tab.url.startsWith("https://")){
chrome.tabs.executeScript(tab.id, {
"file": "js/contentscript.js"
}, function () {
console.log("Script Executed .. "); // Notification on Completion
});
}
else{
alert('Error');
}
});
manifest.json i want to execute the script on browserAction so adding the script on content_scripts is not an option i would like to pursue
"permissions": ["tabs", "windows", "notifications", "activeTab"],
"version": "2.0",
"browser_action":
{
"name": "Click to activate extension",
"default_icon": "images/icon.png",
},
"background":
{
"scripts":["js/background.js"]
},
"icons":
{
"16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
},
"content_scripts":
[{
"js": ["js/jquery-2.1.4.min.js"],
"matches": [ "https://*/*" ],
"run_at": "document_end"
}]
contenscript.js - only a sample script, but gets my point across
alert("here");
setTimeout(function(){window.open("www.google.com");});
P.S. This is my first time asking a question in stackoverflow, please be gentle with me. :D
You could listen to webNavigation.onCompleted event, which fires when a document, including the resources it refers to, is completely loaded and initialized.
Compared with tabs.onUpdated event, you could use event filters to restrict your event notifications. For this part, you could check my answer in this post Running an extension in background on page load/refresh for more details.
manifest.json
{
"name": "36735306",
"version": "1.0",
"description": "Your description here",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"web_accessible_resources": ["content.js"],
"permissions": [
"webNavigation",
"<all_urls>"
]
}
background.js
chrome.webNavigation.onCompleted.addListener(function(details) {
if(details.frameId === 0) {
chrome.tabs.executeScript(details.tabId, {"file": "content.js"});
}
});
How can I write a simple Chrome Extension content script that will execute JavaScript (for example alert("hello");) on every page load?
So when I navigate to a page or reload a page, the JavaScript should run.
This is my manifest.json file so far:
{
"name": "Highlight some phrases",
"description": "Hightlight some pre defined text from websql database after page loads",
"version": "0.1",
"permissions": [
"tabs","<all_urls>"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["content.js"]
}
],
"background": {
"page": "background.html"
},
"manifest_version": 2
}
If all you need is to alert hello on every page load or reload, below is a simple demo:
Manifest.json:
{
"name": "Highlight some phrases",
"description": "Hightlight some pre defined text after page loads",
"version": "0.1",
"permissions": [
"tabs","<all_urls>"
],
"browser_action": {
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["content.js"],
"run_at": "document_end" // Pay attention to this line
}
],
"manifest_version": 2
}
and content.js:
// alert("hello");
document.body.style.background = 'yellow';
Yes, that's enough.
And of course, don't forget to add an icon named icon.png at the same directory with these two files, then test it in Google Chrome.
I'm new to chrome extensions and cannot seem to figure out how the background concept works. I am building a counter extension that keeps counting even when the user closes the extension (but not the browser) and wanted to do a simple test to see if I could figure out how to use the background file. Below is my attempt to create a function that activates everytime a user clicks on a tab (outside of my extension) and when they click on 5 tabs, the alert hits. I cannot figure out why this doesn't work.
background.js:
var counter = 0;
chrome.browserAction.onClicked.addListener(function(tab){
counter++;
if (counter == 5) {
alert("Hi");
}
});
manifest.json:
{
"name": "Hello World!",
"description": "My first packaged app.",
"version": "0.1",
"permissions": ["tabs", "http://*/*"],
"manifest_version":2,
"content_scripts": [ {
"js": [ "jquery-1.9.1.js", "myscript.js" ],
"matches": [ "http://*/*", "https://*/*"]
}],
"background": {
"scripts": [
"background.js"
]
},
"browser_action": {
"default_title": "10,000 Hours",
"default_icon": "icon16.png",
"default_popup": "index.html"
},
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}
It is working for me with following code.
manifest.json
{
"name": "Popping Alert",
"description": "http://stackoverflow.com/questions/15194198/background-js-not-working-chrome-extension",
"background": {
"scripts": [
"background.js"
]
},
"version": "1",
"manifest_version": 2,
"browser_action": {
"default_title": "Click Me"
}
}
background.js
var counter = 0;
chrome.browserAction.onClicked.addListener(function (tab) {
counter++;
if (counter == 5) {
alert("Hey !!! You have clicked five times");
}
});
Can you share your related code or put your problem statement clearly if this does not work?