I am trying to build a custom start page for the new tab page for google chrome. In my HTML I have a link to chrome://apps, however when I click on it I get the error:
Not allowed to load local resource: chrome://apps/
Here is my manifest
"name": "<name>",
"description": "<description>",
"version": "1.0",
"manifest_version": 3,
"chrome_url_overrides" : {
"newtab": "newtab.html"
},
"permissions": [
"activeTab",
"scripting",
"tabs"
],
"host_permissions": [
"<all_urls>"
],
"content_security_policy": {
"script-src": "self",
"object-src": "self"
},
"optional_permissions": ["bookmarks", "topSites"]
}
and this is the html file :
newtab.html ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My new tab page</title>
</head>
<body>
Apps
</body>
<script src="script.js"></script>
</html>
Related
I installed sweetalert2 by npm install sweetalert2.
How i can use it in html file. Below code does not work for me.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="./index.js"></script>
</head>
<body>
<p>Hello from index.html</p>
<button onclick="alertsw()">Click me</button>
</body>
</html>
index.js
console.log("This is index.js from root directory")
import Swal from './node_modules/sweetalert2/src/sweetalert2.js'
function alertsw(){
Swal.fire({
position: 'top-end',
icon: 'success',
title: 'Your work has been saved',
showConfirmButton: false,
timer: 1500
})
}
The error is:
Uncaught ReferenceError: alertsw is not defined
at HTMLButtonElement.onclick
package.json
"scripts": {
"build": "browserify index.js -o dist/bundle.js",
"watch": "watchify index.js -o dist/bundle.js -v"
},
when i click to popup window they open and
when i choose image from my local system
the popup window automatically close and also i can't see the onchange event respose in content.js
were is the code
popup.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input id='inputfile' type='file' name='inputfile' ><br>
</body>
<script src="content.js" defer="defer"></script>
</html>
content.js
document
.getElementById("inputfile")
.addEventListener("onChange", getFileNameWithExt);
function getFileNameWithExt(event) {
const name = event.target.files[0];
console.log(name);
}
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.
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>
<!--
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.