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);
});
Related
When I try to compress an extension I'm creating for Google Chrome, I get the message below (in portuguese, can't find it in English):
Erro de extensão de pacote (Pack extension error)
Falha ao emitir a chave privada. (Failed to output private key)
I can "Load unpacked" and run it perfectly..
Code bellow:
popup.html:
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
<script type='text/javascript' src='./jquery.min.js'></script>
<script type='text/javascript' src='./scripts.js'></script>
</html>
scripts.js:
$(document).ready(function () {
if ($('.LoginScreen').length > 0) {
$("#username").val("usuarioteste");
$("#password").val("senhateste");
$("form[name='loginForm'] .DwtButton").click();
}
});
manifest.json:
{
"name": "Auto Complete Zimbra",
"version": "1.1",
"description": "Extensão para autocompletar e logar automaticamente no Zimbra!",
"manifest_version": 2,
"browser_action": {
"default_icon": "favicon.ico",
"default_popup": "popup.html"
},
"permissions": [
"*://*.meusite.com.br/*"
],
"content_scripts": [
{
"matches": [
"*://*.meusite.com.br/*"
],
"js": [
"jquery.min.js",
"scripts.js"
]
}
]
}
Chrome tries to create a private key file adjacent to the extension directory. In your case that would be C:\extensao.pem (and the extension itself wants to go to C:\extensao.crx). The default permissions on Windows allow creating directories but not files at the root of the C drive.
Move your extension folder somewhere else.
DataTables configuration example
I am trying to create a Chrome extension that uses the DataTables style (which uses Bootstrap). It appears to be working locally, but when I package it as an extension, it no longer displays any style.
The manifest file is as follows:
{
"manifest_version": 2,
"name": "Cookie",
"description": "",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"]
},
"permissions": [
"activeTab",
"tabs",
"cookies",
"history",
"storage",
"https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css",
"https://code.jquery.com/jquery-1.11.3.min.js",
"https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js",
"\u003Call_urls\u003E"
]
}
My html file uses the following scripts and css:
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<!-- refers to a table named 'test' in the body -->
<script>
$(document).ready(function() {
$('#test').DataTable();
} );
</script>
Does the content scripts field have to be added to the manifest file? If so, how exactly would that look?
Thank you.
It turns out there were two main issues:
For a Google Chrome extension, a script cannot be run in the HTML file. The solution was to create another javascript file.
The scripts (jquery and bootstrap) and css had to be local, so we created another folder and added the files to that.
I am using the following code to access the background page function in google chrome
popup.html
function sendRequest(ea,eb)
{
console.log("Inside");
chrome.extension.sendRequest({ea:ea,eb:eb},
function(response)
{
alert(response.farewell);
});
}
background.html
<html>
<body>
<script>
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
sendResponse({farewell: "goodbye"});
})
</html>
</body>
</script>
manifest.json
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"background": {
"page": "background.html"
},
"content_scripts": [
{
"matches": ["http://*/"],
"js": ["popup.js"]
}
],
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "mine.html"
},
"permissions": [
"tabs","http://*/","background"
],
"web_accessible_resources": ["loading.html","bu.png"]
}
However it does not print the alert. Can anyone tell me what i am doing wrong here?
Your HTML for background.html is extremely malformed and should be fixed;
<html>
<body>
<script>
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
sendResponse({farewell: "goodbye"});
})
</script>
</body>
</html>
Tags should be closed in the reverse order of them being open to maintain a correct hierarchy. Since you had not done so, the <script> element was malformed and contained invalid syntax </html></body> so would not be executed correctly.
Since you're using version 2 of the manifest you may want to consider abstracting the contents of this script element (ignoring all HTML) to its own file (e.g. background.js) and change your manifest to the following;
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"minimum_chrome_version": "18",
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["http://*/"],
"js": ["popup.js"]
}
],
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "mine.html"
},
"permissions": [
"tabs","http://*/","background"
],
"web_accessible_resources": ["loading.html","bu.png"]
}
Notice that the background property now contains an array of strings representing JavaScript files to be loaded (in the order specified) in to a dynamically generated background page.
I've also set the minimum_chrome_version property to 18 as manifest version 2 should only be used when targeting this version of Chrome and above.
Developers should now only really need to use background pages instead of scripts when they need to support older versions of Chrome.
Edit
It just clicked that you're attempting to execute embedded JavaScript within your background page. Manifest version 2 introduces Content Security Policies which prohibit the execution of inline (e.g. onclick="showDialog();" and href="javascript:void(0);") and embedded JavaScript. This is why your background.html won't work and why background.js will. You will also want to ensure your popup.html doesn't contain any embedded JavaScript. The best workaround (and generally best practice anyway) is to abstract all JavaScript into its own file (e.g. popup.js) which is referenced by the HTML file. For example;
<script src="/popup.js"></script>
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!