I have written a sample extension to just add new tab to chrome in background page. It's not working. I am new to chrome extension, can you please help me?
manifest.json
{
"manifest_version": 2,
"name": "My extension",
"description": "Test Extension.",
"version": "1.0",
"background": {
"page": "bg.html"
},
"permissions": [
"history",
"tabs"
],
"browser_action": {
"default_icon": "icon.png"
}
}
bg.html
chrome.browserAction.onClicked.addListener(function(activeTab)
{
var newURL = "www.google.com";
chrome.tabs.create({ url: newURL });
});
Try to rename bg.html to bg.js and change manifest background declaration like this
manifest.json:
...
"background": {
"scripts": ["bg.js"]
},
...
bg.js:
chrome.browserAction.onClicked.addListener(function(activeTab)
{
var newURL = "www.google.com";
chrome.tabs.create({ url: newURL });
});
Related
I am new to chrome extensions but trying to setup a XSS detector. I have the ability to test GET and POST separately so I just have GET programmed now. The extension loads but when I test from a known site the extension does nothing. Also setup a console log that gets nothing so I know the extension is just not hooked correctly. Any help on why this is not working would be much appreciated.
I have tried content_scripts in the manifest.json but then get "Uncaught TypeError: Cannot read property 'onBeforeRequest' of undefined" in the xss_detector.js
manifest.json
{
"name": "XSS Detector",
"version": "1.0",
"manifest_version": 2,
"description": "xss detector and frame buster",
"permissions": ["tabs", "notifications", "<all_urls>", "webRequest"
"webRequestBlocking"],
"background": {
"scripts": ["xss_detector.js"],
"persistent": true
},
"browser_action": {
"default_title": "Detects and Busts!",
"default_icon": "icon.png"
}
}
xss_detector.js
chrome.webRequest.onBeforeRequest.addListener(function(details) {
const start_script_re = /.*(<div>\s*)?<script>.*<\/script>
(<\/div>\s*?.*/mi;
const end_script_re = null;
if (details.method === "GET") {
console.log("http get request");
if (decodeURI(details.url).match(start_script_re)) {
return {redirectURL:"javascript:"};
}
} else if (details.method === "POST") {
}
}, {
urls: ["<all_urls>"]
}, ["blocking", "requestBody"]);
manifest.json
{
"name": "XSS Detector",
"version": "1.0",
"manifest_version": 2,
"description": "xss detector and frame buster",
"permissions": ["tabs", "notifications", "<all_urls>", "webRequest", "webRequestBlocking"],
"background": {
"scripts": ["xss_detector.js"],
"persistent": true
},
"browser_action": {
"default_title": "Detects and Busts!",
"default_icon": "icon.png"
}
}
I created a simple chrome extension that adds some functionality to my webPage (site), that is only accessible via extension. Is it possible to postMessages directly from webpage (NOT via content-script) to extension's background-script. And if it's not, what is the use-case of chrome.runtime.connect(EXTENSION_ID);, I mean why it's accessible from web-page?
Code bellow represents how I communicate between my page and extension. It doesn't work, onConnect.addListener doesn't trigger in myExtension, port.onMessage doesn't trigger in myExtension nor in my webPage.
https://localhost:8000/myPage.html:
var port = chrome.runtime.connect("ppibnonicgkeojloifobdloaiajedhgg"); // this is extensionId I got from chrome://extension
port.onMessage.addListener(function (event) {
console.log(event);
});
port.postMessage({type: 'PYCHAT_SCREEN_SHARE_PING', text: 'start'});
background.js from my extension:
chrome.runtime.onConnect.addListener(function(port) {
console.log("Connected from new port ", port);
port.onMessage.addListener(function(msg) {
console.log("Got new message ", msg);
port.postMessage({type: "PYCHAT_SCREEN_SHARE_PING_RESPONSE", data: "successs"});
});
});
manifest.json:
{
"name": "test",
"description": "test",
"version": "1.0.0",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"permissions": [
"desktopCapture",
"tabs"
],
}
Thanks to #wOxxOm #rsanchez I should:
Use chrome.runtime.onMessageExternal in background.js
Add externally_connectable to manifest.json
https://localhost:8000:
var port = chrome.runtime.connect("ppibnonicgkeojloifobdloaiajedhgg");
port.onMessage.addListener(function (event) {
console.log(event);
});
port.postMessage({type: 'PYCHAT_SCREEN_SHARE_PING', text: 'start'});
manifest.json
{
"name": "test",
"description": "test",
"version": "1.0.0",
"manifest_version": 2,
"background": {
"scripts": ["background.js"]
},
"permissions": [
"desktopCapture",
"tabs"
],
"externally_connectable": {
"matches": ["https://localhost:8000"]
}
}
background.js:
chrome.runtime.onConnectExternal.addListener(function(port) {
port.onMessage.addListener(function(msg) {
console.log("it works")
port.postMessage({type: "PYCHAT_SCREEN_SHARE_PING_RESPONSE", data: "successs"});
});
});
With the following code I try to open a mailto: link in a tab if the user clicks on the Chrome extension icon. However, upon click on the icon, no action is being performed.
manifest.json
{
"manifest_version": 2,
"name": "Extension",
"description": "Description",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"tabs"
]
}
popup.js
chrome.browserAction.onClicked.addListener(function tab) {
var emailUrl = "mailto:address#domain.com";
chrome.tabs.create({ url: emailUrl });
};
There are multible issues with your code:
You never require you popup.js.
You JavaScript code is invalid.
I recommend using an eventPage to trigger the E-Mail link:
manifest.json
{
"manifest_version": 2,
"name": "Extension",
"description": "Description",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["eventPage.js"],
"persistent": false
}
}
eventPage.js
chrome.browserAction.onClicked.addListener(tab => {
chrome.tabs.create({ url: 'mailto:address#domain.com' })
})
I am trying to create a chrome extension to redirect a tab url via a custom url. I browsed many already answered questions and tested many but did not find the answer.
my manifest:
{
"name": "Price saver",
"version": "1.0",
"manifest_version": 2,
"description": "Price saving during online shopping",
"background": {
"scripts": ["background.js"]
},
"manifest_version": 2,
"permissions": ["tabs", "webRequest", "webRequestBlocking", "http://*/*", "https://*/*"]
}
my background.js
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
var currentUrl = tabs[0].url;
var newUrl = "www.dealtikka.com/out.php?url=" + currentUrl
return { redirectUrl: newUrl};
},
{
urls: [
'*://*.*/*'
],
types: ['main_frame']
},
['blocking']);
Nothing happens when I click the extension.
I need to create a simple chrome extension which when clicked have to navigate to that website.I have been searching long.But I couldn't find out.Please help me.
Here is my manifest.json file
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"manifest_version":2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background_page": "background.html",
"permissions": [
"tabs"
]
}
this is my background.html
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': "http://calpinemate.com"});
</script>
I am just trying to navigate into my site.But it is not working.Anyone please help me.I only have these two files in my directory and an image icon_128.png.Please help me
background_page is no longer supported in manifest_version 2. Instead use the new format. You can also remove the tabs permissions value since chrome.tabs.create doesn't require it.
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background": {
"scripts": ["background.js"]
}
}
Move background.html to background.js, and remove the <script></script> tags.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': "http://calpinemate.com"});
});
Maybe it is because you are missing theclosibg }) in your background page.
Besides, you don't need any permissions for what you want and it is recommended to use anon-persistent background page (a.k.a. event page).
E.g.:
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({ "url": "http://calpinemate.com" });
});
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"description": "...",
"version": "0.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Test Extension"
"default_icon": "icon_128.png"
}
}
BTW, since you seem to be interested in changing the extension icon, you can take a look into chrome.browserAction.setIcon().
Below is an example that toggles the extension icon when the user clicks on the browser-action (you can adapt it according to your specific needs).
background.js:
var icons = ["red.png", "green.png"];
chrome.browserAction.onClicked.addListener(function(tab) {
var iconIdx = localStorage.getItem("iconIdx");
var newIdx = iconIdx ? (parseInt(iconIdx) + 1) % 2 : 1;
chrome.browserAction.setIcon({ path: icons[newIdx] });
localStorage.setItem("iconIdx", newIdx);
});