Develop Reference

How to fix TypeError: browser.storage is undefined in chrome/firefox web extension?

Note - this question is based off of this question (although it's not necessary to read the previous question): How to set value of textarea in different HTML file?
I have the following code, which is supposed to add a value into the local storage of firefox/chrome and then change the extension's UI (the code will differ slightly based upon which browser is being used, as of now, the code is for a extension in firefox):
function createSummaryBox(summary) {
console.log("Setting textarea content to: " + summary);
const currentSummary = {
currentSummary: summary
}
browser.storage.local.set(currentSummary);
window.location.href = '../summary_page/summary_page.html';
}
However, I get the following error whenever this function is called:
ReferenceError: browser.storage is not defined
How can I fix this error? I read through the MDN documentation on this method, so I'm not sure what I'm missing.

as comments suggest, you need to declare permission.
In manifest.json add:
"permissions": [
"storage"
],
or add it to any existing permissions:
"permissions": [
"activeTab",
"storage"
],
Mozilla doc page
Chrome doc page
Storage API can be used in content scripts.
Don't get confused, it's not an issue here, as it is in another Question linked in comments as possible duplicate, which it's not.

Porting WebExtension from Chrome to Firefox?

I made a working Chrome extension that is not packaged and is just a directory on my computer. I found out that I should be able to port this to Firefox rather easily.
I followed the "Porting a Google Chrome extension" guide on MDN and found that my manifest file is perfect.
I then followed the instructions on how to perform "Temporary Installation in Firefox" of the extension.
However, when I click on any file inside the directory, nothing happens. The extension doesn't load. Any advice? I know the extension works in Chrome fine and loads without error.
manifest.json:
{
"manifest_version": 2,
"name": "ER",
"description": "P",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"scripts": [ "background.js" ]
},
"content_scripts": [
{
"matches": [ "SiteIwant" ],
"js": [ "ChromeFormFill.js" ],
"run_at": "document_idle"
}
],
"permissions": [
"*://*/*",
"cookies",
"activeTab",
"tabs",
"https://ajax.googleapis.com/"
],
"externally_connectable": {
"matches": ["SiteIwant"]
}
}
ChromeFormFill.js:
// JavaScript source c
console.log("inside content");
console.log(chrome.runtime.id);
document.getElementById("ID").value = chrome.runtime.id.toString();
Background.js
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.data === "info") {
console.log("Recieving Info");
return true;
}
});
chrome.tabs.create(
{
url: 'myUrl'
active: true
}, function (tab) {
chrome.tabs.executeScript(tab.id, { file: 'Run.js', runAt: "document_idle" });
});
Run.js will just alert('hi').
It just won't do anything when I try to load it on Firefox; nothing will happen.

Issues:
In manifest.json:
externally_connectable is not supported:1
Firefox does not support externally_connectable. You can follow bug 1319168 for more information. There is, currently, no expected time when this will be implemented.
You will need to communicate between the code on your site and the WebExtension using a different method. The way to do so is to inject a content script and communicate between the site's code and the content script. The common ways to do this are CustomEvent() or window.postMessage(). My preference is CustomEvent().
Using window.postMessage() is like yelling your message outside and hoping that either nobody else is listening, or that they know that they should ignore the message. Other people's code that is also using window.postMessage() must have been written to ignore your messages. You have to write your code to ignore any potential messages from other code. If either of those were not done, then your code or the other code can malfunction.
Using CustomEvent() is like talking directly to someone in a room. Other people could be listening, but they need to know about the room's existence in order to do so, and specifically choose to be listening to your conversation. Custom events are only received by code that is listening for the event type which you have specified, which could be any valid identifier you choose. This makes it much less likely that interference will happen by mistake. You can also choose to use multiple different event types to mean different things, or just use one event type and have a defined format for your messages that allows discriminating between any possible types of messages you need.
matches value needs to be valid (assumed to be intentionally redacted):
You have two lines (one with a trailing ,, one without; both syntactically correct):
"matches": ["SiteIwant"]
"SiteIwant" needs to be a valid match pattern. I'm assuming that this was changed away from something valid to obfuscate the site that you are working with. I used:
"matches": [ "*://*.mozilla.org/*" ]
In Background.js:
The lines:
url: 'myUrl'
active: true
need to be:
url: 'myUrl',
active: true
[Note the , after 'myUrl'.] In addition, myUrl needs to be a valid URL. I used:
url: 'http://www.mozilla.org/',
A Firefox 48 bug (now long fixed):
Your line:
chrome.tabs.executeScript(tab.id, { file: 'Run.js', runAt: "document_idle" });
In Firefox 48 this line is executed prior to the tab being available. This is a bug. It is fixed in Firefox Developer Edition and Nightly. You will need one of those to test/continue development.
Issues in ChromeFormFill.js:
Another Firefox 48 bug (now long fixed):
chrome.runtime.id is undefined. This is fixed in Developer Edition and Nightly.
Potential content script issue:
I'm going to assume your HTML has an element with an ID = 'ID'. If not, your document.getElementById("ID") will be null. You don't check to see if the returned value is valid.
Running your example code
Once all those errors were resolved, and running under Firefox Nightly, or Developer Edition, it worked fine. However, you didn't have anything that relied on being externally_connectable, which won't function.
agaggi noticed that I had forgotten to include this issue in the original version of my answer.

chrome.storage.sync undefined error

I'm writing a simple extension and need to save user blacklisted keywords. I'm using the options_page for chrome to ask users for input, and save those words to the storage to be used later. However, when I press 'save', I get the error Uncaught TypeError: Cannot read property 'sync' of undefined, but I followed the instructions in the chrome extension documentation. I added "permissions": ["storage"]to the manifest.json file, and reloaded the extension and options page multiple times, yet I still get the same error. Here's my javascript code:
var save_options = function() {
var blacklistWords = document.getElementById('word').value;
chrome.storage.sync.set({'blacklistWords': blacklistWords}, function() {
// Update status to let user know options were saved.
alert("saved");
});
};
document.getElementById('save').addEventListener('click', save_options);
I would really appreciate it if someone could help me figure this out.

Your application needs permissions to read/write sync storage.
"permissions": [
"storage",
],

Always reload the extension whenever you update the manifest.json file.

Getting error while detect chrome extension installed or not using javascript

Here is My code,
var myExtension = chrome.management.get( "my_extention_id" );
if (myExtension.enabled)
{
// installed
}
else { ... }
source : http://developer.chrome.com/extensions/management.html#method-get
i have tried this method. But i'm getting following error: Uncaught TypeError: Cannot read property 'get' of undefined

Check in another extension:
https://gist.github.com/greatghoul/321b4f32c0b7a6ad8a97
Check in webpage
https://developer.chrome.com/extensions/messaging#external-webpage
In manifest file, remember to register webpage you want to check extension from.
"externally_connectable": {
"matches": ["*://developer.chrome.com/*"]
}
then you can use chrome.runtime.sendMessage in that page.

If it's undefined then you're missing the management declaration in the manifest:
"permissions": [
"management"
],
Source

chrome.cookies.get showing either undefined or throwing error

chrome.cookies.get({url:"http://www.dahotre.com", name:"userid"}, function(){}) shows undefined in the console.
If I skip the optional empty function(), it throws an error.
chrome.cookies.get({url:"http://www.dahotre.com", name:"userid"}) shows Uncaught Error: Parameter 2 is required.
And if I use function(Cookie c){} as the second param, it throws SyntaxError: Unexpected identifier
Following is the permissions line from my manifest.json:
"permissions": [ "cookies", "http://www.dahotre.com/"],
When I inspect the cookies in my browser, I can most certainly find a cookie from the site www.dahotre.com with a name=userid and a integer content.
How to access this cookie in a chrome extension?

Try:
chrome.cookies.get({url:"http://www.dahotre.com", name:"userid"}, function(cookies){
console.log(cookies);
});
Your function(Cookie c){} was a nice try, but JavaScript is dynamically typed language and those verbose types are used only for documentantion purpose.