<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, {title:"So, how was your day?"});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 400px;"></div>
</body>
</html>
The above code generates a pie chart for us in an html file. It works when I open it in a browser. Let's call the file popup.html.
Then I want to make it a Chrome extension with the following manifest file:
{
"name": "History Visualizer",
"version": "1.0",
"manifest_version": 2,
"description": "Helps us analyze history stats in a visual way",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
But when I hit the icon button, the pie chart just won't load. Anyone help me?
EDIT: error message after inspecting the popup is as follows.
Refused to load script from 'http://www.google.com/jsapi' because of
Content-Security-Policy. Refused to execute inline script because of
Content-Security-Policy.
You need to specify permissions for your extension in manifest.json in order to use resources from google.com:
"permissions": [
"http://*.google.com/"
],
Or if this won't work, try allowing your extension to access all URLs:
"permissions": [
"<all_urls>"
],
Read more about permissions here.
Related
Using Chrome Manifest 3, how can I write a chrome extension that can query the contents of the active tab? I've looked at the API for tabs as well as the scripting API, but I can't seem to find the right way to query the DOM contents of the active tab.
When the button in my popup HTML "Save Content" is clicked, I am expecting my function changeBackgroundColor to execute, allowing me access to the DOM of the active tab. However, the function never executes and moreover I do not know whether or not I will be able to query the DOM of the active tab while my code executes within changeBackgroundColor
Does anyone see what I am doing wrong? Here are the relevant files below:
Here is my popup.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body>
<main id="app---KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaU">
<div class="app__hero-section--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaUp">
<button id="save-content--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaU" class="app__save-content-button--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaUp">Save content</button>
<button id="get-images--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaU" class="app__get-images-button--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaUp">Get Images</button>
</div>
<div class="app_images-hero--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaUp">
Select Images To Import
</div>
<div class="app_images-section--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaUp">
</div>
<button class="app__import-images-button--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaUp">Import Images</button>
<script type="text/javascript" src="jquery-3.5.0.min.js"></script>
<script type="text/javascript" src="popup.js"></script>
</main>
</body>
</html>
This is the JS of the popup:
function changeBackgroundColor() {
console.log('here!!')
}
function findOrCreateContent() {
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
chrome.scripting.executeScript({
target: {tabId: tabs[0].id},
func: changeBackgroundColor
})
});
}
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('#save-content--KZzQjJcI2kdN0Qnn7X7AgyoO8W6VBwuOPIcyztpKBaU').addEventListener('click', findOrCreateContent);
});
This is my manifest json:
{
"manifest_version": 3,
"icons": {
"16": "thing-icon.png",
"128": "thing-icon.png"
},
"name": "Content Saver",
"description": "Save content in the cloud",
"version": "0.1.0",
"action": {
"default_title": "Content Saver",
"default_popup": "popup.html"
},
"permissions": [
"scripting"
],
"host_permissions": [
"http://*/*",
"https://*/*"
]
}
I want the current tab url to be display in the pop up after clicking the extension. I have a popup html and popup.js. For testing purpose, I been trying to alert the tab url instead of replacing the html element.
Manifest.json
{
"manifest_version": 2,
"name": "first extension",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Share it!"
},
"permissions": [
"activeTab"
]
}
popup.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
URL:
<p>www.blahblah.com</p>
<form>
Title:<br />
<input type="text" name="title"><br />
Description:<br />
<textarea rows="4"></textarea><br />
<button>Get</button>
</form>
</body>
</html>
popup.js
chrome.tabs.getCurrent(function(tab){
alert(tab.url);
}
);
You may want to follow the suggested workaround in this link. Try this query chrome.tabs.query(object queryInfo, function callback) which will get all tabs that have the specified properties, or all tabs if no properties are specified.
chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
console.log(tabs[0].url);
});
Here another thread which might also help: How to get current URL in Chrome on click of the button
Can someone help me, I'm building my first chrome extension and it's a popup with a button that's supposed to do something on click (just using alert now), but somehow whatever in my js file doesn't seem to be working. Styles also seem not to load.
manifest:
{
"name": "Toolbar",
"manifest_version": 2,
"version": "1.0.2",
"description": "Toolbar",
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "None",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "http://*/", "https://*/"
]
}
popup.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="popup.js"></script>
</head>
<body>
<div>
<button type="button" id="closeButton"> x<button/>
</div>
</body>
</html>
popup.js:
function closePopup ()
{
//window.close();
alert("hello");
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('closeButton').on("click", function (){
closePopup();
}
});
});
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<!--<script src="popup.js"></script> delete this-->
</head>
<body>
<div>
<button type="button" id="closeButton"> x<button/>
</div>
<!--add this--><script src="popup.js"></script>
</body>
</html>
place the script after the object, where the eventlistener is placed on. I had the same problem and that fixed it
You've got to put the <script src="popup.js"></script> in the <body> instead of <head> tag. That worked for me.
Trying to set a radio (yes or no) default (Yes) building a chrome extension...
Saw lots of other posts whit similar error
Cannot read property 'setAttribute' of null
but the solutions:
document.getElementById('Yes').checked = "checked";
didn't work for me.
Thanks in advance for helping.
Manifest.json
{
"manifest_version": 2,
"name": "Yest or No",
"description": "Yes or No",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["jQuery-v1.10.0.js", "script.js"],
"persistent": false
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*"
]
}
Popup.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
</head>
<head>
<title>Yes or No</title>
<script src="jQuery-v1.10.0.js"></script>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
script.js
$( document ).ready(function() {
document.getElementById('Yes').setAttribute('checked', 'checked');
});
test.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="padding-top: 5px">
<span style="font-size:12px">
<input type="radio" name="FotoPadrao" id="Yes" value="1"> Yes
<input type="radio" name="FotoPadrao" id="No" value="0"> No
</span>
</div>
</body>
I'll jump straight to the answer; you need to add a radio button to your HTML, but first, let's go through your code.
Since you use jquery, there is no need to do document.getElementById, you can use the jquery selector
$("#radio").prop('checked',true);
This snippet will check a radio button for the id "radio".
The code you posted did not have an radio button and this is why you had an error : when getElementById tried to find your input, it did no detect it, so it returned null. Javascript cannot change the attribute of a null object, so it throwed an exception, halting your code.
Here is a snippet of how it should have been :
https://jsfiddle.net/gctkhvm4/1/
I recommend you read up on HTML and jquery here :
http://www.w3schools.com/
It contains great ressources to get started
Edit: I updated the fiddle to take in account the missing html file
The problem might come from the fact that you're trying to set the id of an element not in the same file as the script
I had to add pure java script in a content_scripts... code is updated.
I am just beginning to learn how to make chrome extensions and I have encountered a problem. When I click on my extension, the popup.html does not display correctly. Sometimes it does not display at all, other times it appears like this:
Here is my manifest.json:
{
"name": "Blocker",
"description": "Blocks things",
"version": "0.1",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon.png",
"default_popup": "window.html"
},
"permissions": ["activeTab"]
}
And my window.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body height="300px" width="300px">
<div>Hello, world!</div>
<img src="icon.png">
</body>
</html>