Chrome extension: force event page to stay open? - javascript

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"
}

Related

Chrome Extension, Add Listener Not Responding

I'm trying to create an alert on when chrome.tabs.audible changes condition. After reading the Google developer API information, I do not understand what I'm doing incorrectly. I'm not familiar with JS, so it is possible I'm doing something stupid...
manifest.json:
{
"name": "Extension",
"author": "Extension Author",
"description": "Extension description",
"manifest_version": 2,
"version": "1",
"permissions": [
"tabs",
],
"browser_action": {
"default_popup": "popup.html"
},
"background": {
"scripts": [
"js/background.js"
],
"persistent": false
}
}
background.js:
chrome.tabs.audible.addListener(function(tabs) {
alert("AUDIO");
});
I'm able to load the extension and load the 'popup.html' menu. If I add alert("test"); to 'backgournd.js' outside of a function, it will create the alert.
Look at the Summary table here. There is no Method, Event or Property "audible" inside it, so your chrome.tabs.audible shouldn't work. It is equal to undefined.
You should use onupdate event. So, you code looks like:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, Tab){
if(changeInfo.audible){
console.log("The tab with id = " + tabId + "has changed its audible state.");
}
})

How can Chrome extension functionality be run independently for each tab?

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
}
});

Chrome Extension - Notification on Certain Web Pages

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.

window.history.back(); Not Working in Chrome Extension

I'm creating a google chrome extension that opens the previous page in a new tab, but with my current code, it just executes and creates a new blank tab. How can I make the history back button work?
Manifest
{
"manifest_version": 2,
"name": "Back",
"description": "Opens the Previous Page in a New Tab",
"version": "1.0",
"background": {
"scripts": ["popup.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "Back"
},
"permissions": [
"tabs",
"history"
]
}
and Popup.js
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
var action = window.history.back(1);
chrome.tabs.create({ url: action });
});

Very simple Chrome Extension to display alert

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');
}
});

Categories