Develop Reference

how to read cookies with browser extension

I want a browser extension to read the cookies of a webpage. I want also want the extension only to work on that particular webpage. So i have a button, load cookies and a background.js file:
chrome.extension.getBackgroundPage().console.log("loaded");
function getCookies(domain, name) {
chrome.extension.getBackgroundPage().console.log("loading cookeis");
chrome.cookies.getAll({ url: domain }, function (cookies) {
chrome.extension.getBackgroundPage().console.log(cookies);
});
// return await chrome.cookies.getAll();
}
getCookies(window.location.href, "csrftoken");
document.addEventListener("DOMContentLoaded", function () {
chrome.extension.getBackgroundPage().console.log("loading cookeis");
const loadCookies = document.getElementById("load_cookies");
// onClick's logic below:
loadCookies.addEventListener("click", function () {
getCookies(window.location.href, "x");
});
});
But it does seem like this does not get loaded.
I also get this, which lets me know that the worker is not loaded.
Manifest.json:
{
"manifest_version": 3,
"name": "Management Extension",
"short_name": "Management",
"version": "1",
"description": "A management tool ",
"permissions": ["cookies"],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "index.html"
}
}

How to activate/deactivate chrome extension with keyboard shortcut (development)

I'm trying to set a keyboard shortcut to active/deactivate my Chrome extension that I'm developing. The Chrome extension just consists of a "content_script" that runs on certain sites. I want it to fully activate/deactivate the extension, like if I were to disable it via Chrome://extensions.
In my search for answers, I saw a lot of suggestions to add "_execute_browser_action" to my manifest.json, but I think this command requires a listener that needs to be set up in background.js (correct me if I'm wrong). I want to avoid a background.js if possible, as I want to keep this extension short and sweet.
Here is my manifest.json:
{
"manifest_version": 2,
"name": "foo",
"description": "foo",
"version": "0.1.0",
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+8"
}
}
},
"content_scripts": [{
"js": ["./dist/bundle.js"],
"matches": [ ...certain sites... ]
}],
"icons": {
"16": "/icons/logo16.png",
"32": "/icons/logo32.png",
"48": "/icons/logo48.png",
"128": "/icons/logo128.png"
}
}
With this manifest.json, the shortcut shows up in Chrome://extensions/shortcuts, but the shortcut does nothing. When I press the combination, nothing happens. Even when I refresh the page, reload extension, re-bundle, restart Chrome, etc.
How should I go about adding this keyboard shortcut?
Also, I'm using Babel/Webpack, if that helps.

I ended up solving my own issue. Updating here in case it helps anyone else.
It turns out a background.js was exactly what I was looking for. My background script sets a chrome.storage API field, triggered by browserAction, which my content_script then ingests to toggle it on/off. Then the page is refreshed to update the page html. (Inspiration taken from here)
background.js:
var x = true
enableBrowserAction()
function disableBrowserAction() {
chrome.storage.local.set({enabled: false})
}
function enableBrowserAction() {
chrome.storage.local.set({enabled: true})
}
function updateState() {
if (x == false) {
x = true
enableBrowserAction()
} else {
x = false
disableBrowserAction()
}
chrome.tabs.reload()
}
chrome.browserAction.onClicked.addListener(updateState)
manifest.json (with only the necessary fields):
{
"manifest_version": 2,
"browser_action": {},
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+8"
}
}
},
"permissions": [
"storage"
],
"background": {
"scripts": ["background.js"]
},
"content_scripts": [{
"js": ["./dist/bundle.js"],
"matches": [ ...certain sites... ]
}]
}
content_script (entry for bundle.js):
import ServiceHandler from './ServiceHandler.js'
chrome.storage.local.get('enabled', data => {
if (data.enabled) {
const sh = new ServiceHandler()
sh.execute()
}
})

How to fix TypeError: browser is not defined?

I have an issue with onclick browser action.
All the time it shows TypeError: browser is not defined if i do put in try catch
Tried manually inseritng into firefox console, no success still not defined.
Using firefox 55.
How to overcome the issue?
console.log("Start 1")
function run(){console.log(1)}
browser.browserAction.onClicked.addListener(run);
var interval1Id = setInterval(function(){
var id = document.querySelector(".myclass").id
document.getElementById('m1).contentWindow.document.getElementById(id).click();
var newDate = new Date();
console.log("Function executes at : " +newDate )
},10000);
Manifest
{
"applications": {
"gecko": {
"id": "at#ex.com",
"strict_min_version": "52.0"
}
},
"browser_action": {
"default_icon": {
"18": "icons/btn18.png",
"38": "icons/btn18.png"
},
"default_title": "Whereami1?"
},
"manifest_version": 2,
"name": "FF 1a",
"version": "1a",
"description": "Refresh",
"background": {
"scripts": ["b.js"]
},
"content_scripts": [
{
"matches" : ["https://*/*"],
"js": ["scr.js"]
}
],
"permissions": ["webNavigation","tabs","notifications","activeTab"],
"web_accessible_resources": ["icons/btn18.png"]
}

Output of background script goes to specific Debug page, not to output of firefox console . Extensions-> Debug Extension -> Allow debugging-> Debug on extensions. New console outputs, where everything comes to display
Browser variable only supported in Debug console, not in developer tools console

deleteUrl not working in chrome extensions history API

I'm trying to write an extension to delete some URLs from my history when they are navigated to. Here are the relevant files -
manifest.json
{
"manifest_version": 2,
"name": "Secret",
"description": "Browser History Edits.",
"version": "0.1",
"browser_action": {
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"webNavigation",
"history",
"tabs"
]
}
background.js
var prevent_logging_keywords = ["reddit", "stackoverflow"]
chrome.webNavigation.onBeforeNavigate.addListener(function(details) {
var currentUrl = details.url;
prevent_logging_keywords.forEach(function(keyword) {
if (currentUrl.includes(keyword)) {
console.log(currentUrl);
chrome.history.deleteUrl({ "url": currentUrl}, function(){});
}
});
});
However, this does not work. The URL still shows up in my history and, what's more, the console.log is also never called. What am I doing wrong?

Get selected text in a chrome extension

I wanna make an extension that takes the selected text and searches it in google translate
but I can't figure out how to get the selected text.
Here is my manifest.json
{
"manifest_version": 2,
"name": "Saeed Translate",
"version": "1",
"description": "Saeed Translate for Chrome",
"icons": {
"16": "icon.png"
},
"content_scripts": [ {
"all_frames": true,
"js": [ "content_script.js" ],
"matches": [ "http://*/*", "https://*/*" ],
"run_at": "document_start"
} ],
"background": {
"scripts": ["background.js"]
},
"permissions": [
"contextMenus",
"background",
"tabs"
]
}
and my background.js file
var text = "http://translate.google.com/#auto/fa/";
function onRequest(request, sender, sendResponse) {
text = "http://translate.google.com/#auto/fa/";
text = text + request.action.toString();
sendResponse({});
};
chrome.extension.onRequest.addListener(onRequest);
chrome.contextMenus.onClicked.addListener(function(tab) {
chrome.tabs.create({url:text});
});
chrome.contextMenus.create({title:"Translate '%s'",contexts: ["selection"]});
and my content_script.js file
var sel = window.getSelection();
var selectedText = sel.toString();
chrome.extension.sendRequest({action: selectedText}, function(response) {
console.log('Start action sent');
});
How do I get the selected text?

You are making it a bit more complicated than it really is. You don't need to use a message between the content script and background page because the contextMenus.create method already can capture selected text. Try adjusting your creations script to something like:
chrome.contextMenus.create({title:"Translate '%s'",contexts: ["all"], "onclick": onRequest});
Then adjust your function to simply get the info.selectionText:
function onRequest(info, tab) {
var selection = info.selectionText;
//do something with the selection
};
Please note if you want to remotely access an external site like google translate you may need to adjust your permissions settings.

I would note - this is no longer valid response if you are moving to manifest version 3. Manifest version 3 adds the concept of "service workers". https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/
You have to update several things, but the basic concept is the same.
manifest.json
"name": "Name of Extension",
"version": "1.0",
"manifest_version": 3,
"description": "Description of Extension",
"permissions": [
"contextMenus",
"tabs",
"activeTab"
],
"background": {
"service_worker": "background.js",
"type": "module"
},
background.js
//Setting up the function to open the new tab
function newTab(info,tab)
{
const { menuItemId } = info
if (menuItemId === 'anyNameWillDo'){
chrome.tabs.create({
url: "http://translate.google.com/#auto/fa/" + info.selectionText.trim()
})}};
//create context menu options. the 'on click' command is no longer valid in manifest version 3
chrome.contextMenus.create({
title: "Title of Option",
id: "anyNameWillDo",
contexts: ["selection"]
});
//This tells the context menu what function to run when the option is selected
chrome.contextMenus.onClicked.addListener(newTab);