I've been developing chrome extension for dealing with different tab DOM but with development so far, it seems that an extension can only handle one tab at a time.
background.js has method which calls recursively with 10 sec interval :
function sendMessageScheduler()
{
console.log(tabId); // tab is created for each new tab
timer = setTimeout(function(){
chrome.tabs.sendMessage(tabId, {text: 'click_question',
currentTabId: tabId}, doStuffWithDom);
sendMessageScheduler();
}, 10000);
}
pop.js :
startButtonButton.addEventListener('click', function() {
chrome.extension.getBackgroundPage().sendMessageScheduler();
}, false);
contentscript.js :
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.text === 'click_question') {
}
});
manifest.json :
{
"manifest_version": 2,
"name": "Click Question",
"version": "1.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["*://*.stackoverflow.com/*"],
"js": ["contentscript.js"]
}],
"browser_action": {
"default_icon": "question.png",
"default_title": "Click Questions Plugin",
"default_popup": "popup.html"
},
"permissions": ["activeTab"]
}
What I've assumed before implementing above logic is that the extension will handle each tab independently but with development, it seems that if I execute setTimeout function for one tab, then other tab running setTimeout function stops and vice-versa.
How can I should handle this case so that different timeout function works independently?
You can get all tabs with the following code
chrome.tabs.query({}, function(tabs) {
for (var i = 0; i < tabs.length; i++) {
var tabId = tabs[i].id;
// do what you want
}
});
Related
I'm trying to create a chrome extension (for personal use) that will run every time I open a gmail message, however I can't seem to get the function to run in gmail pages. When I try it on other pages it runs successfully, but not on gmail. I have tried different kind of listeners and added a couple of alerts as an indication for what's running, but on gmail nothing runs at all.
Manifest:
{
"name": "***",
"version": "0.99",
"manifest_version": 2,
"content_scripts" : [
{
"matches": ["<all_urls>"],
"js": ["agent.js"],
"css": ["style.css"],
"all_frames": true
}
],
"icons": {
"16": "icon16.png",
"48": "icon16.png",
"128": "icon16.png"
},
"browser_action": {
"default_popup": "popup.html"
}
}
agent.js:
function replaceText() {
if ((document.body.innerHTML.search("****")) >= 0) {
alert("Found")
var prev = document.getElementsByTagName("table")...
prev = prev.replace(...)
prev = prev.replace(...)
document.getElementsByTagName("table")... = prev
}
}
window.addEventListener('load', function () {
alert("Started")
replaceText()
})
new MutationObserver(() => {
alert("Started")
replaceText()
}).observe(document, {subtree: true, childList: true});
chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete') {
alert("Started")
replaceText()
}
})
I am trying to send the currrent active tab information to a pop-up page from the background script but am getting "undefined" when doing so.
Background script:
//load popup.html in a pop-up window.
chrome.browserAction.onClicked.addListener(function() {
chrome.windows.create({'url': 'HTML/popup.html', 'type': 'popup'},
function(window) {
});
});
//return current active tab
function backgroundFunction () {
var tab = "";
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
tab = tabs[0].title;
});
return tab;
}
popup.js:
(function () {
var otherWindows = chrome.extension.getBackgroundPage();
console.log(otherWindows.backgroundFunction());
})();
My Manifest file:
{
"manifest_version": 2,
"name": "Application Test",
"version": "1.0",
"description": "Test Application",
"icons": {
"128": "icons/icon128.png",
"48": "icons/icon48.png",
"16": "icons/icon16.png"
},
"browser_action":{
"default_icon": "icons/icon16.png"
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs",
"<all_urls>",
"activeTab"
]
}
I suspect it is undefined because the background script tab is now "undefined" because of the pop-up window.
How can I sucessfully send the tab info for whatever URL the user was on to the popup.js file when they click the Extension icon?
Use chrome.runtime, most methods are deprecated in chrome.extension
chrome.runtime.getBackgroundPage(backgroundWindow => {
console.log(backgroundWindow.backgroundFunction());
});
I am using chrome.tabCapture.capture in order to capture a tab's audio from my background page:
chrome.tabCapture.capture({
audio: true,
video: false
}, (stream) => {
if (null == stream) {
chrome.extension.sendMessage({
type: "powerOff"
});
} else {
methods.createAudio(stream);
})
The tab is captured and uncaptured by sending requests from the popup.
I would like the extension to not run in the background while the tab is uncaptured, but when I switch the background persistence to 'false' in the manifest, the event page stops working (capturing) when I switch focus from the captured window.
The event page documentation says :
"If you're using message passing, be sure to close unused message ports. The event page will not shut down until all message ports are closed."
So I'm thinking about using:
setInterval(function () {
console.log("Tab Captured. Forcing event page to stay open..");
chrome.runtime.sendMessage("CAPTURING");
}, 1000);
This in order to force the page to stay open by sending a message to the popup every second.
Is this method safe, and what's the recommended interval value?
Manifest:
{
"background": {
"scripts": ["js/bg/bg.html" ],
"persistent": false
},
"browser_action": {
"default_icon": "style/128_off.png",
"default_popup": "popup.html",
"default_title": "__MSG_mainTitle__"
},
"default_locale": "en",
"description": "__MSG_description__",
"icons": {
"128": "style/128_on.png"
},
"manifest_version": 2,
"name": "__MSG_name__",
"offline_enabled": true,
"options_page": "options.html",
"permissions": [ "*://*/*", "tabCapture", "tabs", "storage" ],
"version": "2.3.9"
}
I'm looking to pop up a chrome notification whenever the user visits certain web pages e.g. 'www.amazon.com' or 'google.com' etc. The extension loads into chrome perfectly fine with no errors, but the notification doesn't pop up when I head to those specific pages.
I currently have the below scripts.
manifest.json
{
"name": "Test",
"version": "0.0.1",
"manifest_version": 2,
"description": "This extension was created with the awesome extensionizr.com",
"homepage_url": "http://www.test.co.uk",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
"page": "src/bg/background.html",
"persistent": true
},
"options_page": "src/options/index.html",
"browser_action": {
"default_icon": "icons/icon19.png",
"default_title": "browser action demo",
"default_popup": "src/browser_action/browser_action.html"
},
"permissions": ["notifications"],
"content_scripts": [
{
"matches": ["http://www.amazon.com/*", "http://amazon.co.uk/*"],
"js": ["js/script.js"]
}
]
}
js/script.js
if(onCertainWebsitesNeedNotificationAppearTrue) {
// send message to background script
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
});
}
background.js
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
chrome.pageAction.show(sender.tab.id);
sendResponse();
});
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
//alert("good");
if (request.greeting == "hello")
createNotification();
});
function createNotification(){
var opt = {type: "basic",title: "Your Title",message: "Your message",iconUrl: "128.png"}
chrome.notifications.create("notificationName",opt,function(){});
//include this line if you want to clear the notification after 5 seconds
setTimeout(function(){chrome.notifications.clear("notificationName",function(){});},10000);
}
New to chrome extension coding so any help would be appreciated!
onCertainWebsitesNeedNotificationAppearTrue isn't defined anywhere so the code is not executed and the message is not sent.
Use the devtools debugger to diagnose the problems.
Also move the code from chrome.extension.onMessage callback inside chrome.runtime.onMessage callback and remove the former.
I am trying to create a quick Chrome extension (complete beginner) and just want to display an alert whenever the icon is clicked, so I tried the following:
manifest.json
{
"name": "Something",
"version": "1.0",
"manifest_version": 2,
"description": "Woohoo",
"browser_action": {
"default_icon": "icon.png"
},
"content_scripts" : [{
"matches": ["<all_urls>"],
"js" : ["bgscript.js"]
}]
}
bgscript.js
chrome.browserAction.onClicked.addListener(function(tab) {
alert('icon clicked')
});
However when I click on my icon, nothing happens! Looking at the above - can anyone spot why this wouldn't work?
In order to be notified for browser-action's onClicked event, you need a background-page (or better yet event-page), not a content-script.
Change your manifest like this:
// Replace that:
"content_scripts" : [{...}]
// with this:
"background": {
"persistent": false,
"scripts": ["bgscript.js"]
}
If you want the browser-action to invoke something on a content-script, you need to communicate throught the background-page using Message Passing (e.g. Simple one-time requests).
E.g.:
manifest.json
{
"name": "Something",
"version": "1.0",
"manifest_version": 2,
"description": "Woohoo",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"content_scripts" : [{
"matches": ["<all_urls>"],
"js" : ["content.js"]
}]
}
background.js
chrome.browserAction.onClicked.addListener(function (tab) {
/* Send a message to the active tab's content script */
chrome.tabs.sendMessage(tab.id, { action: 'saySomething' });
});
content.js
chrome.runtime.onMessage.addListener(function (msg) {
/* We received a message, let's do as instructed */
if (msg.action === 'saySomething') {
alert('something');
}
});