Develop Reference

Chrome extension on a React page

I have a simple chrome extension that auto-fills the form on a page with default values.
manifest.json file
{
"manifest_version": 2,
"name": "Form Filler",
"description": "This extension auto fills form in a specific page.",
"version": "1.0",
"icons": {
"128": "128x128.png"
},
"page_action": {
"default_icon": "19x19.png",
"default_popup": "popup.html",
"default_title": "Form Filler"
},
"options_page":"options.html",
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
"content_scripts":[
{
"matches": ["http://test-site.com/*"],
"js": ["content.js", "jquery-3.1.0.min.js"]
}
],
"permissions": [
"tabs",
"storage",
"http://test-site.com/*"
]
}
and this is content.js file
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
if (request.act == "fill"){
let name = request.name;
let email = request.email;
$('#name').val(name);
$('#email').val(email);
}
});
That works perfectly fine on a normal HTML page.
But it doesn't work on a react page.
I guess obvious reason is that things are handled by state and if I can somehow alter the state, I should be able to get it working.
I tried this code ( file = content.js )but no success
chrome.runtime.onMessage.addListener(function(request, sender) {
if (request.act == "fill") {
this.setState({"form.name": "My Name"});
}
}.bind(this));
This is the eventPage.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
if (request.todo == "showPageAction")
{
chrome.tabs.query({active:true,currentWindow: true}, function(tabs){
chrome.pageAction.show(tabs[0].id);
});
}
});
I am unable to access the state in the extension JS.
What would be the proper way to perform this task?

Why is chrome.runtime undefined in the content script?

I have a very simple chrome extension, where I'm trying to pass a message from the background script to the content script. But chrome.runtime is undefined.
Here's literally all the code, as you can see there's almost nothing to it. In the content script, runtime is undefined.
Background Script:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.runtime.sendMessage({action: 'someAction'},
function(response) {
console.log('Response: ', response);
});
});
Content Script:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
sendResponse({
user: 'user'
});
});
manifest.json
{
"manifest_version": 2,
"name": "My Extension",
"version": "1.0",
"description": "Some stupid extension",
"browser_action": {
"default_icon": "icons/MyExtensionIcon.png"
},
"icons": {
"48": "icons/MyExtensionIcon.png"
},
"permissions": [
"tabs",
"storage",
"https://*/",
"http://*/"
],
"content_scripts": [
{
"matches": ["*://*.twitter.com/*", "https://twitter.com/*"],
"js": ["js/content.js"]
}
],
"background": {
"scripts": ["js/background.js"],
"persistent": true
},
"web_accessible_resources": [
"js/*",
"css/*"
]
}
Other Info:
Chrome Version 58.0.3029.110 (64-bit)
Installing my extension as an
"Unpacked extension" with developer mode

Ok I figured it out. It's absolutely stupid, but it appears this is simply a Heisenbug. By adding a breakpoint, or debugger statement, it causes that value to be undefined. Maybe a chrome bug?
I swear, every day Chrome feels more, and more like Internet Explorer.

Screenshot using chrome.tabs.captureVisibleTab

I'm trying to capture the visible area of a page using chrome.tabs.captureVisibleTab. Here is the code that makes the call:
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
if (request.name == 'screenshot') {
chrome.tabs.captureVisibleTab(null, null, function(dataUrl) {
sendResponse({ screenshotUrl: dataUrl });
});
}
});
But when I try to capture the tab I get this error:
Unchecked runtime.lastError while running tabs.captureVisibleTab: The 'activeTab' permission is not in effect because this extension has not been in invoked.
Here is my manifest file:
{
"manifest_version": 2,
"name": "Empathy",
"version": "0.1",
"description": "Simulate accessibility issues for websites.",
"browser_action": {
"default_icon": "empathy19.png",
"default_title": "Empathy!"
},
"permissions": [
"activeTab",
"contextMenus",
"desktopCapture",
"tabCapture",
"tts" // Text-to-speech
],
"background": {
"scripts": [
"boot.js"
],
"persistent": false
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": [
"src/helpers.js",
"src/colorblindness.js",
"lib/colorvision.js",
"lib/html2canvas.js"
]
}
]
}
I have active tab permissions
The call is being made from a background script
I'm matching <all_urls>
Why do I get that error?

There are things that talk about <all_urls> as something to match, but what I was missing was the <all_urls> permission. After I added the permission, it worked.

How To Initiate A Message Request From Content Script On Tab Change?

I've an extension which need to keenly keep an eye on the URL of the very active tab in the browser [chrome]. Currently, I've been able to track those URL's which user load/reload from start. But if there is a tab change, the content script doesn't send message to background script and get back anything.
In fact I want to reload content.js script on tab change of user as well.
Here's what I've done till now:
CONTENT.JS:
// Code here....
chrome.extension.sendMessage({ wants: 'URL' }, function(res) {
var urlResponse = res.url;
});
// Code here....
Works pretty well, but this content.js doesn't fire on tab change. Instead it fires when a document is changed in same tab (like visiting new link, etc)
BACKGROUND.JS:
chrome.extension.onMessage.addListener(
function(script, sender, sendResponse) {
if (script.wants == 'URL') {
sendResponse({ maskedURL: sender.tab.url });
}
}
);
MANIFEST.JSON:
{
"manifest_version": 2,
"name": "NAME HERE",
"description": "DESC HERE",
"version": "1.1",
"options_page": "options.html",
"browser_action": {
"default_title": "NAME",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"icons": { "16": "icon.png",
"48": "icon.png",
"128": "icon.png" },
"permissions": [
"storage",
"<all_urls>",
"tabs"
],
"content_scripts": [
{
"matches": ["http://*/*","https://*/*"],
"js": ["content.js"]
}
],
"web_accessible_resources": [
"bg.png",
"*.woff",
"*.woff2"
],
"background": {
"scripts": ["background.js"]
}
}
Thank you!
EDIT: Xan please have a look:

Could not understand your question properly but I will try to clarify to the best of my knowledge.
content.js is run once when a new page is opened or an existing page is refreshed.It cant access the details of the currently active tab.
If you want to know about any details of the tabs,use chrome.tabs API in background.js
chrome.tabs.onActivated.addListener(activeInfo){ //Fired when an active tab is changed
chrome.tabs.query({'active':true,'currentWindow':true},function(array_of_tabs){//Gives details of the active tab in the current window.
alert(array_of_tabs[0].url);
});

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