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"]
}
],
Related
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);
});
I am trying to build a chrome extension that would let me check if some elements are present on the page opened. Can someone help me here. Its giving null values when I use the code below.
manifest.json
{
"name": "A browser action with a popup that changes the page color.",
"version": "1.0",
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
"browser_action": {
"default_title": "Set this page's color.",
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"manifest_version": 2
}
popup.html
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<script src="popup.js"></script>
</head>
</html>
popup.js
if(jQuery('#nav').is(':visible')==true){
alert("true");
}else {
alert("false");
}
You have to use the "content script", which will run on the pages you specify. The popup page only gets called when user clicks your extension button.
{
...,
"content_scripts": [
{
"matches": [
"*"
],
"js": [
"script.js"
]
}
],
...
}
More info here: http://developer.chrome.com/extensions/content_scripts.html
Also, when checking, firs check if the element actually exists then check it's visibility:
var $nav = jQuery('#nav');
if ($nav.length > 0 && $nav.is(':visible') == true) {
alert("true");
} else {
alert("false");
}
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 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 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!