I created a js script that goes with my popup.html for a chrome browser extension I'm working on. It listens for a change in a slider value on the HTML and then sends a message to the content.js script with the new data. However, it seems I can't use sendMessage in this script. I'm using manifest v3.
Here's my js:
var slider = document.getElementById("slider");
let value = slider.value;
//function is called when the slider moves
changeSlider = function() {
value = slider.value;
update();
}
update = function() {
chrome.runtime.sendMessage({ message: "update", data: value });
}
Here's my manifest:
{
"manifest_version": 3,
"name": "e",
"version": "0.1",
"author": "e",
"homepage_url": "https://www.example.com",
"permissions": [
"contextMenus",
"activeTab",
"nativeMessaging"
],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["src/content.js"]
}],
"web_accessible_resources": [
{
"resources": ["src/*"],
"matches": ["<all_urls>"],
"use_dynamic_url": true
}],
"background": {
"service_worker": "src/background.js"
},
"action":
{
"default_popup": "src/popup.html",
"default_icon": "src/resources/icon.png"
},
"icons": {
"16": "src/resources/icon-16.png",
"32": "src/resources/icon-32.png",
"48": "src/resources/icon-48.png",
"128": "src/resources/icon-128.png"
}
}
And here's the console error I get whenever I adjust the slider:
additionally, my interpreter doesn't autofill chrome.runtime, so I assume something went wrong there. Help :D
Related
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
}
I was looking for without success.
I want to get the status of my requests from my extension but I can not get it.
Manifiest
{
"manifest_version": 2,
"name": "Pixel Checker TT",
"description": "This extension validate your pixels and its requests",
"version": "1.6",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"persistent": true,
"scripts": ["popup.js"]
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["sources/js/jquery-3.0.0.min.js","content.js"]
}
],
"permissions": [
"tabs",
"activeTab",
"webRequest",
"webRequestBlocking",
"*://*.mydomain.co/",
"*://*.myotherdomain.co/"
]
}
popup.js or background code
chrome.webRequest.onCompleted.addListener(function(details) {
for (var i = 0; i < details.requestHeaders.length; ++i) {
console.log(details.requestHeaders[i].url);
console.log(details.requestHeaders[i].statusCode);
}
},
{urls: ["<all_urls>"]},
['blocking','requestHeaders']);
The problem is that I dont have errors just aren not printed the info. I also tried to put the info in a div with $('#pixelsFound').text(details.requestHeaders[i].url)
but doesn't work too.
I am building a Chrome extension that injects some HTML and JS when the user clicks the extension icon. So, when the icon is clicked, it is registered in the bg script, and the content script is notified about this like so:
Background script
chrome.browserAction.onClicked.addListener(iconClicked)
function iconClicked(tab) {
var visitors = window.AllVisitors.get(tab.id),
data = {
message: 'toggleMenu',
user: window.user
};
chrome.tabs.sendMessage(tab.id, data);
}
Now, to the problem: In my manifest file, I have also added a custom page for the chrome://newtab page. When the extension icon is clicked while visiting this custom newtab page, the content script does not receive any message what so ever. The default newtab page does actually receive the message as well as any other webpage.
I am thinking that maybe it has something to do with externally_connectable, but adding this does not help:
"externally_connectable": {
"matches": ["chrome://newtab/"],
}
Does anybody know why my custom newtab page does not receive any messages from the background script? Any help is very appreciated!
Manifest file:
{
"manifest_version": 2,
"name": "Orbit",
"version": "0.0.1",
"web_accessible_resources": [
"templates.html",
"img/icon48.png",
"fonts/*.woff",
"img/*"
],
"externally_connectable": {
"matches": ["chrome://newtab/"],
},
"chrome_url_overrides" : {
"newtab": "tab/newtab.html"
},
"icons": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"browser_action": {
"default_icon": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"default_title": "Orbit"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["vendor/chrome-promise.js", "vendor/jquery.js", "vendor/underscore.js", "vendor/backbone.js", "orbit.js"]
},
{
"matches": ["<all_urls>"],
"css": ["sidebar.css"]
}
],
"background": {
"scripts": ["vendor/socket.io.js", "vendor/jquery.js", "vendor/underscore.js", "vendor/backbone.js", "vendor/chrome-promise.js", "vendor/jquery.js", "eventPage.js"],
"persistent": true
},
"permissions": [
"http://fonts.googleapis.com/*",
"https://fonts.googleapis.com/*",
"https://get-orbit.com:8080/*",
"activeTab",
"tabs",
"storage"
]
}
Content scripts aren't injected on chrome-extension:// pages.
Simply add the script manually in your newtab.html:
<html>
<head>
<script src="your-content-script.js"></script>
</head>
I'm trying to create a button on a page
My manifest.json has content script inject.js
and inject.js is like this
var botao_comunidades = document.querySelector('a[href="#Communities"]');
var botao_teste = document.createElement('p');
botao_teste.innerHTML = 'Test';
botao_teste.className = "themeLightTransparency NSC";
botao_comunidades.insertAdjacentElement('afterend',p);
manifest.json
{
"name": "Teste",
"version": "0.0.1",
"manifest_version": 2,
"description": "Teste",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"permissions": [
"<all_urls>"
],
"content_scripts": [
{
"matches": [
"https://www.orkut.com.br/*"
],
"js": [
"src/inject/inject.js"
]
]
}
]
}
and it does nothing
:(
From your manifest, delete the extra ] that closes content_scripts.js (if you want to make this exact code work, there are a few other steps mentioned at the end). Then when I load your script, the console at the website says Uncaught ReferenceError: p is not defined on line 6. Change the last line to botao_comunidades.insertAdjacentElement('afterend',botao_teste); and everything works.
Other steps to make this exact code work:
Delete “icons” and “default_locale” from the manifest
Change content_script.matches to “http://www.orkut.com.br/*”
Change the first line of inject.js to use querySelector('#signUpViewport’);
Here's the finished product:
manifest.json:
{
"name": "Teste",
"version": "0.0.1",
"manifest_version": 2,
"description": "Teste",
"permissions": [
"<all_urls>"
],
"content_scripts": [
{
"matches": [
"http://www.orkut.com.br/*"
],
"js": [
"src/inject/inject.js"
]
}
]
}
src/inject/inject.js:
var botao_comunidades = document.querySelector('#signUpViewport');
var botao_teste = document.createElement('p');
botao_teste.innerHTML = 'Test';
botao_teste.className = "themeLightTransparency NSC";
botao_comunidades.insertAdjacentElement('afterend',botao_teste);
And a screen shot ("Test" is in the bottom left):
Now it's your turn to be a little more descriptive in how it's not working.
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