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.
Related
This question already has answers here:
How to access the webpage DOM/HTML from an extension popup or background script?
(2 answers)
Closed 7 years ago.
For some reason, jQuery doesn't work in my background.js in my Google Chrome extension.
Suppose my plugin tells me all the images on the page. I verified that it gets to the below method OK, but it stops at the jQuery loop.
First, manifest.json: note I'm including jQuery, the file exists:
{
"name": "Gallery",
"version": "0.0.1",
"manifest_version": 2,
"description": "Gallery",
"browser_action": {
"default_icon": "G.png"
},
"background": {
"persistent": true,
"scripts": ["jquery-1.11.2.min.js", "background.js"]
},
"permissions": [
"tabs", "contextMenus", "http://*/*", "https://*/*"
],
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"css": ["contentstyle.css"],
"js": ["jquery-1.11.2.min.js", "contentscript.js"]
}
],
"icons": {
"32": "G.png"
}
}
background.js uses the jQuery syntax:
chrome.browserAction.onClicked.addListener(scanImages);
function scanImages()
{
// IT GETS HERE - THIS IS OK
alert('Clicked plugin button, about to start looping thru IMG...');
// BUT STOPS HERE: JQUERY DOESN'T EXECUTE
$("img").each(function() {
alert($(this).prop("src"));
});
// ANOTHER JQUERY THAT DOESN'T WORK
alert('Page title = ' + $(document).find("title").text());
}
To access the DOM of any page you need to use content scripts as explained in the comments. Though there is another way of accessing more than one scripts in your background.js.
Add the jquery-1.11.2.min.js in your background.html file.
....
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="background.js"></script>
....
manifest.json -->
"background": {
"page": "path/to/background.html",
"persistent": true
}
You don't have to define the scripts key also, just define your background.html page and the scripts you want in the head section of the html file. I Hope it helps.
I have just started developing chrome extension ( Using chrome 34).
My aim is to check for a ID attribute in a site by opening it in multiple languages.
For instance, whenever I open that website, and click on my extension link. The extension should open the website in multiple languages in background, and check if a html "ID" exists.
As a start, I want to get the current URL for that site.
manifest.json -
{
"manifest_version": 2,
"name": "Hello World!",
"description": "My extension",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
]
}
My popup.html is
<script type="text/javascript" src="currentUrl.js"/>
and currentUrl.js is
chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT},
function(tabs){
alert(tabs[0].url);
}
);
But it is not working to alert the current URL. Whenever I click extension, just a small blank window appears.
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 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"]
}
],