I've an extension which need to keenly keep an eye on the URL of the very active tab in the browser [chrome]. Currently, I've been able to track those URL's which user load/reload from start. But if there is a tab change, the content script doesn't send message to background script and get back anything.
In fact I want to reload content.js script on tab change of user as well.
Here's what I've done till now:
CONTENT.JS:
// Code here....
chrome.extension.sendMessage({ wants: 'URL' }, function(res) {
var urlResponse = res.url;
});
// Code here....
Works pretty well, but this content.js doesn't fire on tab change. Instead it fires when a document is changed in same tab (like visiting new link, etc)
BACKGROUND.JS:
chrome.extension.onMessage.addListener(
function(script, sender, sendResponse) {
if (script.wants == 'URL') {
sendResponse({ maskedURL: sender.tab.url });
}
}
);
MANIFEST.JSON:
{
"manifest_version": 2,
"name": "NAME HERE",
"description": "DESC HERE",
"version": "1.1",
"options_page": "options.html",
"browser_action": {
"default_title": "NAME",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"icons": { "16": "icon.png",
"48": "icon.png",
"128": "icon.png" },
"permissions": [
"storage",
"<all_urls>",
"tabs"
],
"content_scripts": [
{
"matches": ["http://*/*","https://*/*"],
"js": ["content.js"]
}
],
"web_accessible_resources": [
"bg.png",
"*.woff",
"*.woff2"
],
"background": {
"scripts": ["background.js"]
}
}
Thank you!
EDIT: Xan please have a look:
Could not understand your question properly but I will try to clarify to the best of my knowledge.
content.js is run once when a new page is opened or an existing page is refreshed.It cant access the details of the currently active tab.
If you want to know about any details of the tabs,use chrome.tabs API in background.js
chrome.tabs.onActivated.addListener(activeInfo){ //Fired when an active tab is changed
chrome.tabs.query({'active':true,'currentWindow':true},function(array_of_tabs){//Gives details of the active tab in the current window.
alert(array_of_tabs[0].url);
});
Related
Trying to send a message from background.js to content.js returns Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
I've tried:
background.js
chrome.tabs.onRemoved.addListener((tabId, removeInfo) => {
chrome.tabs.sendMessage(tabId, "some-random-message")
})
content.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
alert(message)
sendResponse("Successfully received message.")
})
Is this happening because I'm trying to send a message to my content script after that tab has been closed? If so, is there any way to still access the document in the content script after or while the tab is closing?
To add more info, I also did try using chrome.tabs.onCreated... instead of onRemoved but with no avail.
EDIT: Adding my manifest.json file.
{
"manifest_version": 3,
"name": "Some Extension Name",
"version": "0.0.1",
"action": {
"default_popup": "popup.html",
"default_title": "Some Extension Name"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["./content.js"]
}
],
"background": {
"service_worker": "./background.js"
},
"permissions": ["cookies", "tabs", "storage"]
}
I am working on a chrome extension that will enable user to click on an added button to inform me of their interest.
Basically, I built a chrome extension which displays a toolbar and I want the user to be able to click on this toolbar and execute a script after it.
Here are my codes and it does not work...
manifest.json file :
{
"manifest_version": 2,
"name": "XX Extension",
"version": "1.0",
"description": "The best extension for my friends",
"icons":{
"128" : "images/icon128.png",
"48" : "images/icon48.png",
"16" : "images/icon16.png"
},
"background": {
"scripts": ["js/jquery-3.4.1.min.js", "js/background.js"]
},
"permissions": [
"contextMenus",
"activeTab",
"tabs",
"notifications"
],
"content_scripts": [
{
"matches": ["https://www.mysite.fr/produit/*", "*://*.mysite.fr/produit/*"],
"css": ["css/extension_style.css"],
"js": ["js/jquery-3.4.1.min.js", "js/content.js"]
}
],
"browser_action": {
"default_icon": "images/icon16.png",
"default_title": "XX Extension",
"default_popup": "popup.html"
},
"web_accessible_resources": [
"toolbar.html",
"css/extension_style.css"
]
}
content.js file :
var script_text=$("script:contains(['ean'])").html();
var product_ean=script_text.split("['product']['ean']")[1].split(";")[0].replace("= '","").replace("'","");
chrome.runtime.sendMessage(product_ean);
var url = chrome.extension.getURL('toolbar.html');
var height= '35px';
var iframe = "<iframe src='"+url+"' id='myOwnCustomToolBar_TT91' style='height:"+height+"'></iframe>";
$('html').append(iframe);
$('body').css('transform','translateY('+height+')');
/* Topbar clicked */
$('#myOwnCustomToolBar_TT91').on('click', function(){
alert('it is clicked');
// do stuff executing js script
});
background.js file :
chrome.runtime.onMessage.addListener(function(response, sender, sendResponse){
alert("Le code EAN de ce produit RDC est "+response);
});
chrome.browserAction.onClicked.addListener(function(){
chrome.tabs.executeScript(null, {
code : "alert('Wow it is working guy');"
});
});
The chrome extension work well to alert the EAN code of the product but the click event on the appended topbar by the extension does not work...
Thank you very much for your feedback and help !
Best regards,
I have a simple chrome extension that auto-fills the form on a page with default values.
manifest.json file
{
"manifest_version": 2,
"name": "Form Filler",
"description": "This extension auto fills form in a specific page.",
"version": "1.0",
"icons": {
"128": "128x128.png"
},
"page_action": {
"default_icon": "19x19.png",
"default_popup": "popup.html",
"default_title": "Form Filler"
},
"options_page":"options.html",
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
"content_scripts":[
{
"matches": ["http://test-site.com/*"],
"js": ["content.js", "jquery-3.1.0.min.js"]
}
],
"permissions": [
"tabs",
"storage",
"http://test-site.com/*"
]
}
and this is content.js file
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
if (request.act == "fill"){
let name = request.name;
let email = request.email;
$('#name').val(name);
$('#email').val(email);
}
});
That works perfectly fine on a normal HTML page.
But it doesn't work on a react page.
I guess obvious reason is that things are handled by state and if I can somehow alter the state, I should be able to get it working.
I tried this code ( file = content.js )but no success
chrome.runtime.onMessage.addListener(function(request, sender) {
if (request.act == "fill") {
this.setState({"form.name": "My Name"});
}
}.bind(this));
This is the eventPage.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
if (request.todo == "showPageAction")
{
chrome.tabs.query({active:true,currentWindow: true}, function(tabs){
chrome.pageAction.show(tabs[0].id);
});
}
});
I am unable to access the state in the extension JS.
What would be the proper way to perform this task?
I want to know how to detect if a button with a certain id is clicked on a webpage with my chrome extension.
With my code I have an error saying that my element is undefined.
Here is my manifest :
{
"manifest_version": 2,
"name": "app",
"description": "my app",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Changer le background"
},
"permissions": [
"activeTab",
"storage"
]
}
And my popup.js file :
document.addEventListener('DOMContentLoaded', () => {
getCurrentTabUrl((url) => {
document.getElementById('mybutton').addEventListener('click', function() {
var script = "console.log('clicked');";
chrome.tabs.executeScript({code: script});
});
});
});
your popup.js will not load until the user himself will click on the extension's icon... i think you should change your approach and use a content-script like this:
document.getElementById('mybutton').addEventListener('click', function() {
console.log('clicked');
});
you'll need to update your manifest.json for using a content script, something like that:
"content_scripts": [
{
"matches": ["the url of a page for the script", "the url of another page"],
"js": ["your_script.js"]
}
],
Having trouble, and wasnt finding anything else on here that answered what I have :/
Manifest:
{
"name": "Item Sniper",
"version": "1.0",
"description": "Sniper",
"browser_action": {
"default_icon": "face.png",
"default_title": "Sniper"
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs",
"notifications",
"http://*/*"
]
}
Background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null,{file: "buy.js"});
}
);
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
var notify = webkitNotifications.createNotification(
'face.png', // icon url - can be relative
'Hello!', // notification title
'Oh hellow!' // notification body text
);
});
Buy.js [There's more to it, but this is the notification part]:
chrome.extension.sendRequest({msg: "Sup?"}, function(response) { // optional callback - gets response
console.log(response.returnMsg);
});
I basically want the content script to create a notification, but I didnt know if it was possible while sticking with a js script as background :/
Thanks for any help,
Alex
The background property is only available for manifests using version 2. If you want to support this you'll need to update your manifest to the following;
{
"name": "Item Sniper",
"version": "1.0",
"description": "Sniper",
"manifest_version": 2,
"minimum_chrome_version": "18",
"browser_action": {
"default_icon": "face.png",
"default_title": "Sniper"
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs",
"notifications",
"http://*/*"
]
}
Notice that I also set the minimum_chrome_version property to 18 as manifest version 2 can only be used when targeting this version of Chrome or newer.
I think you missed to call notify.show(); in your background.js
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
var notify = webkitNotifications.createNotification(
'face.png', // icon url - can be relative
'Hello!', // notification title
'Oh hellow!' // notification body text
);
notify.show();
});
http://code.google.com/chrome/extensions/notifications.html#api