Chrome Extension, Add Listener Not Responding - javascript

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

Related

Why does tab.url from the callback of "chrome.tabs.onUpdated.addListener()" return undefined?

For my Chrome extension, I need to show the pageAction only on a certain website. I used to do this with declarativeContent, but it isn't supported on Firefox, so I have to do it the manual way. The answers to this question suggested that you could simply use something like this:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if (changeInfo.status === "complete" && tab.url) {
if (tab.url.match(/google.com/)) {
chrome.pageAction.show(tabId);
}
}
});
This didn't work for me, so I modified the code in the background script to look like this:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
console.log("Tab updated! Tab URL: " + tab.url);
});
Every time you update a tab the console just prints Tab updated! Tab URL: undefined a few times. I also tried to query the tab like the answers to this question said, which produces the same output.
The other files of the extension are:
manifest.json:
{
"name": "Test",
"version": "1.0",
"description": "Test for StackOverflow",
"permissions": ["activeTab"],
"background": {
"scripts": ["background.js"]
},
"page_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
popup.html:
<!DOCTYPE html>
<html>
<body>
This is a popup!
</body>
</html>
You are missing the tabs permission from your manifest.json file. With this permission the URL of the tab should also be logged to the console.
"permissions": ["activeTab", "tabs"] // <-- This
manifest.json:
{
"name": "Test",
"version": "1.0",
"description": "Test for StackOverflow",
"permissions": ["activeTab", "tabs"],
"background": {
"scripts": ["background.js"]
},
"page_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}

Running an extension in background on page load/refresh

I'm new to writing extensions (and javascript). I'd like an extension to run on a timer whenever a certain URL is opened/refreshed. Code is below. This is all I have so far from what I've found online. I'm not sure if this will run for just one tab at a time.
manifest.json
{
"manifest_version": 2,
"name": "Test Plugin",
"description": "This extension is a test.",
"version": "1.0",
"content_scripts": [
{
"matches": ["https://www.google.com/*"],
"js": ["main.js"]
}
],
"permissions": [
"activeTab"
]
}
main.js
chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete' && tab.active) {
setInterval(mainF, 5000)
}
})
function mainF() {
var getTitle = document.getElementById('title');
var titleValue = getTitle.Value();
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fh = fso.OpenTextFile("test.txt", 8, false, 0);
fh.WriteLine(titleValue);
fh.Close()
}
Move your logic to the Event Page.
Content Script doesn't have access to chrome.tabs API.
And according to best practices when using event pages,
Use event filters to restrict your event notifications to the cases you care about. For example, if you listen to the tabs.onUpdated event, try using the webNavigation.onCompleted event with filters instead (the tabs API does not support filters). That way, your event page will only be loaded for events that interest you.
Code snippets would look like
manifest.json
{
"manifest_version": 2,
"name": "Test Plugin",
"description": "This extension is a test.",
"version": "1.0",
"background": {
"scripts": ["main.js"],
"persistent": false
},
"permissions": [
"webNavigation"
]
}
main.js
chrome.webNavigation.onCompleted.addListener(function(details){
console.log("Certain url with hostSuffix google.com has been loaded");
}, {url: [{hostSuffix: 'google.com'}]});

How to display pageaction icon on specific website?

Here is my manifest.json, just in case for reference.
{
"manifest_version": 2,
"name": "Results app", "description": "This extension helps
calculate your total and percentage.", "version": "1.0",
"permissions": ["http://www.example.com/*"],
"page_action": {
"default_icon": {
"19": "icon.jpg"
},
"default_title": "",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://www.example.com/*"],
"js": ["contentscript.js"]
}
]
}
How do I get pageaction icon to be displayed on the site which matches the criteria as given in manifest.json.
I tried this but no avail.
Generally, now how can I get pageaction icon to be displayed??
Debugging background page: I got this error
The best way to show the page action button (since Chromium 33) is via the chrome.declarativeContent API:
For example, to show the page action on example.com and its subdomains, the following code can be used:
chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: {
hostSuffix: 'example.com'
}
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
Do not forget to add the declarativeContent and *://*.example.com/ permissions to your manifest file.
See the documentation of the UrlFilter type for more ways of matching URLs, and chrome.declarativeContent for usage details.

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

Not able to add jquery file to chrome extension

I am trying to add Jquery to my chrome extension ,
here is my manifest.json
{
"name": "OSpy",
"description": "",
"version": "1",
"manifest_version": 2,
"background":{
"scripts":["background.js"]
},
"js": ["js/jquery-1.10.2.min.js"]
"browser_action": {
"default_title": "Object Spy"
},
"permissions":["tabs","<all_urls>"],
"web_accessible_resources": [
"img/bt.png"
"js/jquery-1.10.2.min.js"
]
}
Problem is it is giving ,
Uncaught ReferenceError: $ is not defined
Apparently, your extension uses primarily background page and that is the place where you need jQuery. In this case, you can simply add jQuery JavaScript file in the list of background scripts:
{
"name": "OSpy",
"description": "",
"version": "1",
"manifest_version": 2,
"background":{
"scripts":["js/jquery-1.10.2.min.js", "background.js"]
},
"browser_action": {
"default_title": "Object Spy"
},
"permissions":["tabs","<all_urls>"]
}
REMEMBER TO PUT JQUERY SCRIPT BEFORE YOUR ACTUAL BACKGROUND SCRIPT!
Here's a simple example. Let's say you have an extension that makes Ajax request from its background page to its local html file and print the response to the console.
manifest.json:
{
"name": "Local Request",
"description": "Send Ajax request using jQuery",
"version": "2.0",
"background": {
"scripts": ["js/jquery-1.10.2.min.js", "background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Send Request"
},
"manifest_version": 2
}
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
$.get("ajax/test.html", function(data) {
console.log(data);
});
});
Do the same steps to use jQuery in your content script. Here's an example of doing that in official documentation: http://developer.chrome.com/extensions/content_scripts.html ("js": ["jquery.js", "myscript.js"]).

Categories