I'm trying to build an extension to monitor the xhr portion of the devtools network tab. I decided to start as simple as possible with the background script below. I'm seeing no errors on loading the extension, but don't see any output in the console.
manifest.json:
{
"manifest_version": 3,
"version": "1.0",
"name": "Hello World!",
"description": "Learning how to make a chrome extension!",
"icons": {
"16": "images/puppy16.png",
"48": "images/puppy48.png",
"128": "images/puppy128.png"
},
"action": {
"default_icon": "images/puppy.png",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"host_permissions": [
"https://yahoo.com/*"
],
"permissions": [
"webRequest"
]
}
In my background.js:
(function () {
chrome.webRequest.onCompleted.addListener(
function (details) {
console.log('HELLO THERE!!!!', details);
},
{ urls: ["<all_urls>"] }
);
}());
What am I doing wrong?
The background-page and webpage console log to different places so you wouldn't see console.log('HELLO THERE!!!!', details); in the webpage's console. Refer the answer below for how to view the background-page console.
Accessing console and devtools of extension's background.js
Related
I'm trying to build an extension to monitor the xhr portion of the devtools network tab. I decided to start as simple as possible with the background script below. I'm seeing no errors on loading the extension, but don't see any output in the console.
manifest.json:
{
"manifest_version": 3,
"version": "1.0",
"name": "Hello World!",
"description": "Learning how to make a chrome extension!",
"icons": {
"16": "images/puppy16.png",
"48": "images/puppy48.png",
"128": "images/puppy128.png"
},
"action": {
"default_icon": "images/puppy.png",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"host_permissions": [
"https://cnn.com/*"
],
"permissions": [
"webRequest"
]
}
In my background.js:
(function () {
chrome.webRequest.onCompleted.addListener(
function (details) {
console.log('HELLO THERE!!!!', details);
},
{ urls: ["<all_urls>"] }
);
}());
What am I doing wrong?
I know there are 3 different contexts : background, popup, web page. I want to capture/intercept a web page's console log in my extension, How can I do that?
Here is my code:
contentScript.js:
console.log('starting>>>>');
var log = console.log;
console.log = function () {
log.call(this, '**** MY Console**** ');
log.apply(this, Array.prototype.slice.call(arguments));
// ...
}
};
manifest.json:
{
"name": "my extension 01",
"version": "1.0",
"description": "----",
"permissions": ["activeTab","storage","declarativeContent"],
"background":{
"scripts":["background.js"],
"persistent":false
},
"page_action": {
"default_popup": "popup.html"
},
"options_page": "options.html",
"content_scripts": [
{
"matches": ["https://MY-WEBSITE/*"],
"run_at":"document_start",
"js": ["contentScript.js"]
}
],
"manifest_version": 2
}
This question already has answers here:
TypeError: [API] is undefined in content script or Why can't I do this in a content script?
(2 answers)
Closed 5 years ago.
While migrating my old Firefox add-on to WebExtension API, failed to understand while I am getting this error:
TypeError: browser.browserAction is undefined
Here is the manifest.json:
{
"manifest_version": 2,
"name": "My Login",
"version": "3.0",
"description": "Login to my page",
"homepage_url": "https://localhost",
"icons": {
"48": "icons/button-1.png"
},
"permissions": [
"activeTab", "storage"
],
"browser_action": {
"default_icon": "icons/button-1.png",
"default_title": "Login"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["index.js"]
}
],
"options_ui": {
"page": "options.html"
}
}
Here is the index.js:
function handleClick() {
var loginUserName, loginPassword;
var URL = window.content.location.href;
var doc = window.content.document;
}
browser.browserAction.onClicked.addListener(handleClick);
So I am getting TypeError: browser.browserAction is undefined in the browser console when I go to about:debugging and load my add-on as a temporary addon.
Options.html, options.js and button-1.png do exist - I just don't place them here.
Observed in Firefox 55.0.3 (32-bit). Any idea why this error happens?
Thanks,
Racoon
browser.browserAction should be called in a background script and not in a content script like you're doing. So assuming this code is in background.js:
function handleClick() {
console.log("do something.");
// If you want to something with the content, you will need a content script and messaging
}
browser.browserAction.onClicked.addListener(handleClick);
You add the background_scripts key in manifest.json:
{
"manifest_version": 2,
"name": "My Login",
"version": "3.0",
"description": "Login to my page",
"homepage_url": "https://localhost",
"icons": {
"48": "icons/button-1.png"
},
"background": {
"scripts": ["background.js"]
}
}
I would like my Chrome Extension to on show up on google and amazon. My manifest.json looks like this:
{
"background": {"scripts": ["background.js"]},
"content_scripts": [
{
"matches": ["*://*.google.com/*", "http://www.amazon.com/*", "*://*.amazon.com/*"],
"js": ["background.js"]
}
],
"name": "Denver Public Library Lookup",
"description": "Does Stuff",
"homepage_url": "http://www.artifacting.com",
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png" },
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"version": "1.0",
"manifest_version": 2
}
But it doesn't show up on either google or amazon and I can't figure out why.
Here is my background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {file: "bookmarklet.js"})
});
And here is the bookmarlet.js
setTimeout('x99.focus()', 300);
var re = /([\/-]|at[at]n=)/i;
if (re.test(location.href) == true) {
var isbn = RegExp.$2;
var x99 = window.open('http://searchsite/search/searchresults.aspx?ctx=1.1033.0.0.6&type=Keyword&term=' + atatn, 'Library', 'scrollbars=1,resizable=1,top=0,left=0,location=1,width=800,height=600');
x99.focus();
}
Any ideas? Thanks for your help.
Many mistakes in the code.
You don't need content script here, all operations could be executed
within background page content
It it hard to make background page
code works within content script, this is definitely not a your case.
So using the same background.js as both background and content script
does not work in your case at least
Manifest does not declare browser
action.
And so on
I strongly suggest to start with Google extension documentation. You will save a lot of your time.
How I think files might look like
manifest.json
{
"background": {"scripts": ["background.js"]},
"name": "Denver Public Library Lookup",
"description": "Does Stuff",
"homepage_url": "http://www.artifacting.com",
"icons": {
"16": "icon-16.png",
"48": "icon-48.png",
"128": "icon-128.png" },
"browser_action": {
"default_icon": {
"19": "images/icon-19.png",
"38": "images/icon-38.png"
},
"default_title": "Do Staff" // optional; shown in tooltip
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
],
"version": "1.0",
"manifest_version": 2
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
// You need more sothisticated regexp here which checks for amazon and google domains
var re = /([\/-]|at[at]n=)/i;
if (re.test(tab.url)) {
var isbn = RegExp.$2;
var url = "http://searchsite/search/searchresults.aspx?ctx=1.1033.0.0.6&type=Keyword&term=" + isbn;
chrome.windows.create({
url : url,
left: 0,
top: 0,
width: 800,
height: 600,
focused: true,
type: "popup"
});
}
});
bookmarlet.js is not needed
I want to do something that seems like it should be fairly simple, but I can't get it to work.
All I want it to do is when the button in the popup is clicked I want to log the word "Hello" to the console. At the moment nothing happens. No error message. Just nothing.
Here is my manifest.jason file
{
"name": "Content Script",
"version": "1.0",
"description": "Experiments with content scripts.",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
}
}
Here is my popup.html
<h1>Hello</h1>
<script>
function changeField() {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {"code": "sayHello"});
});
}
</script>
<button onclick="changeField();">Click</button>
Here is my contentscript.js
function sayHello() {
console.log("Hello");
}
chrome.extension.onRequest.addListener(
function(request, sender, response) {
if(request.code == 'sayHello') {
sayHello();
}
}
);
I've been reading the docs but they seem to skip over a lot of things. If someone could explain why this doesn't work I would be eternally grateful.
You didn't inject your content script to the page which console lives in.
Add content_scripts segment to your manifest.json file.
There is a reference of manifest.json file on chrome extension official site.
{
"name": "Content Script",
"version": "1.0",
"description": "Experiments with content scripts.",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"popup": "popup.html"
},
"content_scripts":[{
"matches":["http://*/*"],
"js":["content_script.js"]
}]
}