In an extension I'm developing, I set the manifest without the popup page, so that when you click the icon of the app in the browser's toolbar it immediately opens the app's page.
The app's page is index.html and in this page I load the
<script src="background.js"></script> & <script src="./index.js"></script>
The background.js file has the following code to open the index.html page after the click:
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.create(
{
active: true,
url: "index.html",
},
null
);
});
also tested with: chrome.tabs.create({ url: chrome.extension.getURL("index.html") }); , but same issue occurs.
The manifest.json file:
"background": {
"page": "index.html",
"persistent": false
},
"browser_action": {
"browser_style": true,
"default_icon": {
"16": "images/icon16.png"
}
},
When I first click the icon, it opens the index.html, ... , but the second time I click the icon it opens 2 index.html files, if I click it again then it opens 4, and so on. It's ok to open another index.html, but just one for each icon click.
What would be the mistake I'm doing?
Thanks in advance, Ken
Try this.
manifest.json
{
"name": "Test",
"version": "0.0.1",
"manifest_version": 2,
"background": {
"scripts": [
"./background.js"
]
},
"permissions": [
"tabs"
],
"browser_action": {
}
}
background.js
chrome.browserAction.onClicked.addListener((tab) => {
chrome.tabs.create({
url: chrome.runtime.getURL("./page.html")
});
});
page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>extension page</title>
</head>
<body>
<h2>Extension Page</h2>
</body>
</html>
Related
I'm trying to make a Chrome extension which runs a script whenever the user opens a new tab.
I have the following basic code which is supposed to just paint the page red whenever the extension button is clicked.
It seems to work fine when I navigate to an actual website (ex: here on stackoverflow.com, click my extension icon, page becomes red). However, if I just create a brand new tab and click the button, the popup loads but the page never changes color.
manifest.json:
{
"manifest_version": 2,
"name": "ConsoleTap",
"version": "0.1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "menu.html"
},
"permissions": [
"tabs",
"<all_urls>",
"https://ajax.googleapis.com/"
]
}
menu.html:
<!doctype html>
<html>
<head>
<script src="menu.js"></script>
</head>
<body>
hello
</body>
</html>
menu.js:
document.addEventListener('DOMContentLoaded', function() {
chrome.tabs.executeScript(null,{code:"document.body.style.backgroundColor='red'"});
});
Any ideas on why the page won't update the background color on a new tab? I'm guessing the DOMContentLoaded is never fired or it's listening after the load occurs somehow?
Chrome doesn't allow content scripts on its internal pages: more info
In Chrome 60 and older it was still possible to inject content scripts into the child frames of the default new tab page because it consists of several frames so the restriction only applies to the top level frame. For the default newtab (not some newtab extension) we can match its frame url (https://www.google.com/_/chrome/newtab*) to inject a content script which will activate once a message from the popup is received:
manifest.json:
{
"name": "executeScript",
"version": "1.0",
"content_scripts": [{
"matches": ["https://www.google.com/_/chrome/newtab*"],
"js": ["newtabcontent.js"],
"run_at": "document_start"
}],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
],
"manifest_version": 2
}
newtabcontent.js:
chrome.runtime.onMessage.addListener(function(msg) {
if (msg == "activate") {
document.body.style.background = 'red';
document.body.style.backgroundColor = 'red';
}
});
popup.js:
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
if (tabs[0].url == "chrome://newtab/") {
chrome.tabs.sendMessage(tabs[0].id, "activate");
} else {
chrome.tabs.executeScript({
code: "document.body.style.backgroundColor='red'",
allFrames: true
});
}
});
Notes:
When this extension is installed and its permissions are displayed the user will see that it can "Read and change your data on www.google.com".
chrome.tabs.executeScript can't be used on newtab page because it instantly fails for the main frame due to unsupported scheme chrome:// and doesn't even proceed to execute on child frames.
I am new to Google Chrome Extensions. I have created a button in my extension. With that button I want to redirect the user to another site (like "www.example.com").
I have the following code which I wrote for the redirection, but it doesn't work.
Related question.
manifest.json
{
"name": "Popup ",
"manifest_version": 2,
"version": "0.1",
"description": "Run process on page activated by click in extension popup",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "http://*/*", "https://*/*"
]
}
popup.html
<html>
<head>
<script src="popup.js"></script>
<style type="text/css" media="screen">
body { min-width:250px; text-align: center; }
#click-me { font-size: 15px; }
</style>
</head>
<body>
<button id='click-me'>Click Me!</button>
</body>
</html>
background.js
chrome.extension.onRequest.addListener(function(request, sender) {
chrome.tabs.update(sender.tab.id, {url: request.redirect});
});
popup.js
function clickHandler(e) {
chrome.extension.sendRequest({redirect: "https://www.google.co.in"});
alert("url");
this.close();
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('click-me').addEventListener('click', clickHandler);
})
Do you have any idea why it doesn't work?
If you use background pages, then you need to declare the background script (background.js in your case) in the manifest file:
"background": {
"scripts": [ "background.js" ]
},
Your example will not work though, because sender.tab is only defined if the request came from a tab or content script, not from the popup.
In your example, there is no need for a background page at all, you can just use the chrome.tabs API directly from the popup page:
function clickHandler(e) {
chrome.tabs.update({url: "https://example.com"});
window.close(); // Note: window.close(), not this.close()
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('click-me').addEventListener('click', clickHandler);
});
So I've had enough of this one page, I always have to check a checkbox if I want to send a private message, and when I send a message, I want it to be private always. So I decided to try making a google chrome extension about it. So I've created the default files, manifest.json, and popup.html, but I can't get it working.
What am I doing wrong?
Manifest.json:
{
"name": "xxx",
"version": "1.0",
"manifest_version": 2,
"description": "Automaattinen yksityiskommentointi.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
popup.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>XXX</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
Moi
</body>
</html>
and script.js:
$(document).ready(function(){
$('.private-checkbox').prop('checked', true);
});
It would be too easy, right? I bet that this would only check the checkbox on the popup, but I want to check checkboxed in the tabs I open.
It worked for me with following change in popup.html
Download jquery.min.js and add it in your package as shown
Use
<script src="jquery.min.js"></script>
instead of
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Only local script and and object resources are loaded
Script and object resources can only be loaded from the extension's package, not from the web at large. This ensures that your extension only executes the code you've specifically approved, preventing an active network attacker from maliciously redirecting your request for a resource.
Updated Manifest.json
{
"name": "xxx",
"version": "1.0",
"manifest_version": 2,
"description": "Automaattinen yksityiskommentointi.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["http://www.facebook.com/*"],
"js": ["jquery.min.js","myscript.js"]
}
]
}
myscript.js
$(document).ready(function(){
$('.private-checkbox').prop('checked', true);
});
I want to create an extension that reacts to a click that searches for all the <ul>'s in the page, and surround them with a border. The problem is that the code doesn't work, and clicking on the extension icon doesn't search for anything.
mainfest.json:
{
"name": "My First Extension",
"version": "1.0",
"background_page": "background1.html" ,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"tabs", "http://*/*","https://*/*"
]
}
background1.html:
<!doctype html>
<html>
<head>
<title>Background Page</title>
<script src="js/jquery-1.3.2.min.js"></script>
<script>
function ul_checker(){
$('ul').addClass('ul_style');
$('ul').append('<div class="close">X</div>');
$('.close').addClass('style2');
}
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null,
{code:"ul_checker()"});
});
</script>
</head>
<body>
</body>
</html>
Your extension is of type content script. You will have to specify what scripts will run on the page, see the manifest and description of the official documentation. I assume that you will have to include jquery as a content script :).
Therefore, accordingly to the documentation you will have to add the following in your manifest.json:
"content_scripts": [
{
"js": ["js/jquery-1.3.2.min.js"]
}
],
I am creating a Google Chrome extension and want to populate a form field on a page.
I am trying something like this with no effect:
chrome.tabs.executeScript(null,
{code:"document.body.form[0].email_field='" + email + "'"});
}
You should make sure you have the "tabs" permission in your manifest.json:
{
"name": "123 Testing",
"version": "0.1",
"description": ":-)",
"browser_action": {
//"default_icon": "my_icon.png",
"default_title": "Click to fill the form"
},
"background_page": "background.html",
"permissions": [
"tabs",
"http://*/"
]
}
I believe you should access forms with document.forms and not document.body.form.
See my background.html file, and test it with google.com:
<html>
<head>
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {
code: "document.forms[0]['q'].value='Hello World!'"
})
});
</script>
</head>
<body></body>
</html>
(I would have usually used document.getElementById).
Good luck!