Develop Reference

Open new tab from Chrome Extension Context Menu

UPDATE:
So because of the way my folder is structured, it looks like instead of chrome-extension://meajimhgfmioppbkoppphhkbcmapfngh/index.html it should be chrome-extension://meajimhgfmioppbkoppphhkbcmapfngh/html/index.html. When I type this in manually into the search bar it works but is still not working when I update my code to this:
chrome.contextMenus.onClicked.addListener(function (result) {
if (result['menuItemId'] === 'open-sesame') {
chrome.tabs.create({ 'url': chrome.extension.getURL("/html/index.html") }, function (tab) {
})
}
})
I have a chrome extension where users are presented my extension as a new tab. A new feature I am implementing is the ability to switch back to the default google search page and now users can access the extension from the browser action context menu. I referenced this answer when trying to come up with a solution.
I am now stuck at the contextMenu since when I click on it, I come up to the page where it says file could not be accessed.
background.js
chrome.contextMenus.create({
title: "Open",
contexts: ['browser_action'],
id: 'open-sesame',
})
chrome.contextMenus.onClicked.addListener(function (result) {
if (result['menuItemId'] === 'open-sesame') {
chrome.tabs.create({ 'url': chrome.extension.getURL("index.html") }, function (tab) {
})
}
})
The url that the new tab opens to is chrome-extension://meajimhgfmioppbkoppphhkbcmapfngh/index.html which seems like it would be correct to open my extension but it is still not working for whatever reason.
Folder Structure
html
index.html
js
background.js
css
style.css

Turns out I had to add the right file pathing to access my index.html and update the extension to get it to work.

How do I check for existence of a resource from within the same Google Chrome extension?

Say I have the following files in my unpacked Google Chrome extension:
manifest.json
my.extension.js
image.png
How do I check if image.png exists using Javascript in my.extension.js?
Edit:
I know (and I think it would work) that we could create an <img> element and use the onerror event OR use XMLHttpRequest to check for the existence but I am looking for a better(?) alternative solution, if any.

Declare my.extension.js as event page or background page. (Content Scripts will not work with the following method since the chrome.* API provided in content scripts is limited)
Use chrome.runtime.getPackageDirectoryEntry, as suggested by Xan, which is based on HTML 5 Filesystem API to access the resource files and thus you can check for the file existence therein.
manifest.json:
{
"background": {
"scripts": ["my.extension.js"],
"persistent": false
},
"manifest_version": 2,
"name": "Check Resource Existence",
"version": "1.0",
}
my.extension.js:
filename = "image.png";
chrome.runtime.getPackageDirectoryEntry(function(storageRootEntry) {
fileExists(storageRootEntry, filename, function(isExist) {
if(isExist) {
/* your code here */
}
});
});
function fileExists(storageRootEntry, fileName, callback) {
storageRootEntry.getFile(fileName, {
create: false
}, function() {
callback(true);
}, function() {
callback(false);
});
}

You could look into chrome.runtime.getPackageDirectoryEntry:
chome.runtime.getPackageDirectoryEntry(function callback)
Returns a DirectoryEntry for the package directory.
You'll then be able to list files in your extension. For an example, see this answer.
That said, your XHR approach should also work. You just need to catch that error.

CrossRider API, get opened tabs title

I am using the CrossRider api to get the opened tabs, using there API I can get the title of the links in my bookmarks, however with there api I cannot use how to get the title of the urls in my opened tabs, I can just get the URL.
Does anyone know if this is achievable, if not then if there is some other way. Current I have to call a php script to make calls to the URLs and extract the title, this is getting too slow with a lot of tabs open

It would be great if you included a code snippet to show how your code works. However, in the absence of a snippet, I'm guessing that you are working in the background scope using an API method such as appAPI.tabs.getAllTabs. As you correctly surmised, the method does no not provide the title of the URL.
There are several way to work around this, on of which you mentioned, however, I prefer getting the information from the tab itself through messaging. For example, assuming you still need the information in the background scope:
background.js:
appAPI.ready(function($) {
appAPI.message.listener(function(msg) {
if (msg.action==='tab-info') {
doSomething(msg.data);
}
});
appAPI.message.toAllTabs({action:'get-tab-info'});
});
extension.js:
appAPI.ready(function($) {
appAPI.message.listener(function(msg) {
if (msg.action==='get-tab-info') {
appAPI.message.toBackground({
action:'tab-info',
data: {
tabId: appAPI.getTabId(),
url: appAPI.dom.location.href,
title: document.title
}
});
}
});
});
[Disclosure: I am a Crossrider employee]

"chrome.permissions is not available" when requesting optional permissions for my extension

I am building an extension that requires access to history to provide one of the features.
After publishing a version which contained the permission as mandatory and consequently losing a part of my users because they got scared away by the big alert saying that the extension might be able to snoop into their history (I really didn't plan on doing that), I decided to publish a version with the offending part removed and the permission disabled as a temporary fix.
I'd like to implement this feature back using optional permissions.
First of all, I added the new optional permission to my manifest file:
...
"permissions": [
"https://news.ycombinator.com/",
"http://news.ycombinator.com/"
],
"optional_permissions": [ "history" ],
...
Then, I built a function to request permissions into the script which handles the extension's settings:
Settings.prototype.applyPermissions = function (permissions, map) {
Object.keys(permissions).forEach(function (key) {
if (map[key]) {
var checkbox = map[key].getElementsByTagName("input")[0];
checkbox.addEventListener("change", function (e) {
if (this.checked) {
chrome.permissions.request(permissions[key], function(granted) {
if (granted) {
// Permission has been granted
} else {
// Not granted
}
});
}
});
}
});
};
The key part here is this:
checkbox.addEventListener("change", function (e) {
if (this.checked) {
chrome.permissions.request(permissions[key], function(granted) {
if (granted) {
// Permission has been granted
} else {
// Not granted
}
});
}
});
I perform the request on an event caused by user interaction (the guide states that it won't work otherwise), and pass permissions[key], an object specified in my extension's settings which looks like this:
"permissions": {
"mark_as_read": {
"permissions": ["history"]
}
}
When accessing it as permissions[key], I get this part:
{
"permissions": ["history"]
}
Which is basically the format that the documentation shows for this kind of requests.
If I run this code and toggle the checkbox that should enable the feature, and look at the error log, I see this error:
chrome.permissions is not available: You do not have permission to
access this API. Ensure that the required permission or manifest
property is included in your manifest.json.
I also tried accessing this API from a background page, where it was actually available but I was not allowed to use because Chrome requires that you access it from a user interaction, and such interaction is lost if you send a message to the background page from your content script to request activation.
Am I missing something obvious here? Maybe I need to add something to the manifest, but I can't find any explicit documentation about it.

I assume you're trying to do this from a content script. You can't access most chrome.* APIs from content scripts, including chrome.permissions. However, you've correctly pointed out that a background page is also unsuitable, because you a permission change requires a direct user action.
Luckily, we have hardly exhausted our options. You could set the permission in:
The extension's options page
A browser action popup
A page action popup
Any page in your extension served through the chrome-extension:// scheme, provided you include the page and necessary sub-resources as web_accessible_resources in your manifest
In the last case, get the URL using chrome.extension.getURL. You could possibly use an iframe to inject it directly into the page, if you don't want the permission-requesting interface to be separate from the current page.
So, in fact, content scripts and background pages are the only two extension contexts where you can't use chrome.permissions.

Assign click event to addon icon on navigation bar

We have created a chrome extension for our app. Where we call a METHOD from a "js file" on CLICK event of the "extension icon" placed on the navigation bar. For this we use message passing between the app.js (file containing the METHOD to be called on icon click) and background.html (using a js file included in this html).
The script used to pass message is:(from background.html)
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.sendMessage(tab.id, "showPopup");
});
and to listen the message :(in app.js)
chrome.extension.onMessage.addListener(function(request) {
if (request === "showPopup") {
showPopup();
}
});
The click event works as expected. But now we want to do same thing in mozilla extension. and we can't pass message to app.js on the click of the icon,so that it can execute the containing methods.
We have also added the app.js using pageMod, something like this
exports.main = function(options, callbacks) {
pageMod.PageMod({
include: ["*"],
contentScriptWhen: 'start',
contentScriptFile: [data.url('jquery-1.7.1.min.js'),data.url('app.js')]
});
createAndAddNavBarButton();
};
function createAndAddNavBarButton() {
var navBar = document.getElementById('nav-bar');//assume document has been defined
if (!navBar){return;};
var nbBtn = document.createElement('navbaricon');
nbBtn.setAttribute('id', 'navButton');
nbBtn.setAttribute('image', data.url('icon_16.png'));
nbBtn.onclick = function(){
showPopup();
return true;
}
navBar.appendChild(btn);
}
But the click event does nothing and showPopup() is undefined. When a new page loads event associated with it in the app.js executes without any error but the click event doesn't work.
Is there a method from where we can assign click event directly to this icon, as we have done in the case of chrome extension.

Many add-ons use this 3rd-party module by Erik Vold:
https://github.com/erikvold/toolbarbutton-jplib/
In the future we have plans to add similar widgets to Firefox for any add-on developer to use.

Was able to send message to the app.js script by message passing. All we have to do is, add the app.js file within the scope of message passing, so that it can communicate with the javascript.
nbBtn.addEventListener('click', function() {
var workers = tabs.activeTab.attach({
contentScriptFile: [ data.url("jquery-1.7.1.min.js"), data.url("app.js")]
});
workers.postMessage("doABC");
}, false)
navBar.appendChild(nbBtn);
Now in app.js we can receive this message and show the popup