Hey I have some errors in Chrome Extension when i run the Extension Popup. But on a simple website it runs! Please help me!
The Errors from Google Chrome Extensions:
Uncaught SyntaxError: Identifier 'keys' has already been declared script.js:1 (Anonyme Funktion)
const keys = {
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
index.html:40 (Anonyme Funktion) Generate
My manifest.json:
{
"name": "DivusX Password Generator",
"version": "0.0.1",
"description": "This is the Password Generator Tool from the DivusX platform!",
"manifest_version": 2,
"browser_action": {
"default_popup": "index.html",
"default_icon": "images/icon.png"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["script.js"]
}
]
}
My index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Password Generator In Javascript</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css">
<script src="script.js"></script>
</head>
<body>
<div >
<div >
<h2>Password Generator</h2>
<div >
<p id="passwordBox"></p><i onclick="copyPassword()"></i></i>
</div>
<div>
<label for="length">Length</label>
<input type="number" id="length" min="6" max="20" value="6">
</div>
<div>
<label for="symbol">Include Symbol</label>
<input type="checkbox" id="symbol" checked>
</div>
<div>
<label for="number">Include Number</label>
<input type="checkbox" id="number" checked>
</div>
<div>
<label for="lowerCase">Include lowerCase</label>
<input type="checkbox" id="lowerCase" checked>
</div>
<div>
<label for="upperCase">Include upperCase</label>
<input type="checkbox" id="upperCase" checked>
</div>
<button onclick="createPassword()">Generate</button>
</div>
</div>
<script src="script.js"></script>
</body>
My script.js:
const keys = {
upperCase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
lowerCase: "abcdefghijklmnopqrstuvwxyz",
number: "0123456789",
symbol: "!@#$%^&*()_ ~\`|}{[]:;?><,./-="
}
const getKey = [
function upperCase() {
return keys.upperCase[Math.floor(Math.random() * keys.upperCase.length)];
},
function lowerCase() {
return keys.lowerCase[Math.floor(Math.random() * keys.lowerCase.length)];
},
function number() {
return keys.number[Math.floor(Math.random() * keys.number.length)];
},
function symbol() {
return keys.symbol[Math.floor(Math.random() * keys.symbol.length)];
}
];
function createPassword() {
const upper = document.getElementById("upperCase").checked;
const lower = document.getElementById("lowerCase").checked;
const number = document.getElementById("number").checked;
const symbol = document.getElementById("symbol").checked;
if (upper lower number symbol === 0) {
alert("Please check atleast one box!");
return;
}
const passwordBox = document.getElementById("passwordBox");
const length = document.getElementById("length");
let password = "";
while (length.value > password.length) {
let keyToAdd = getKey[Math.floor(Math.random() * getKey.length)];
let isChecked = document.getElementById(keyToAdd.name).checked;
if (isChecked) {
password = keyToAdd();
}
}
passwordBox.innerHTML = password;
}
function copyPassword() {
const textarea = document.createElement("textarea");
const password = document.getElementById("passwordBox").innerText;
if (!password) { return; }
textarea.value = password;
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
textarea.remove();
alert("Password copied to clipboard");
}
CodePudding user response：
According to the error message "Refused to execute inline event handler",
you cannot use onclick attribute of html element in chrome extension.
you should rewrite the code as follows.
1: change index.html:
<button id="generate">Generate</button>
2: add to script.js:
document.querySelector("#generate").addEventListener("click", createPassword);
Do the same thing for onclick="copyPassword()".
CodePudding user response：
Thanks, but i also have still errors
My index.html now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Password Generator In Javascript</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css">
<script src="script.js"></script>
</head>
<body>
<div >
<div >
<p>Password Generator</p>
<div >
<p id="passwordBox"></p><i ></i></i>
</div>
<div>
<label for="length">Length</label>
<input type="number" id="length" min="6" max="20" value="6">
</div>
<div>
<label for="symbol">Include Symbol</label>
<input type="checkbox" id="symbol" checked>
</div>
<div>
<label for="number">Include Number</label>
<input type="checkbox" id="number" checked>
</div>
<div>
<label for="lowerCase">Include lowerCase</label>
<input type="checkbox" id="lowerCase" checked>
</div>
<div>
<label for="upperCase">Include upperCase</label>
<input type="checkbox" id="upperCase" checked>
</div>
<button id="generate">Generate</button>
</div>
</div>
<script src="script.js"></script>
</body>
My script.js now:
const keys = {
upperCase: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
lowerCase: "abcdefghijklmnopqrstuvwxyz",
number: "0123456789",
symbol: "!@#$%^&*()_ ~\`|}{[]:;?><,./-="
}
const getKey = [
function upperCase() {
return keys.upperCase[Math.floor(Math.random() * keys.upperCase.length)];
},
function lowerCase() {
return keys.lowerCase[Math.floor(Math.random() * keys.lowerCase.length)];
},
function number() {
return keys.number[Math.floor(Math.random() * keys.number.length)];
},
function symbol() {
return keys.symbol[Math.floor(Math.random() * keys.symbol.length)];
}
];
function createPassword() {
const upper = document.getElementById("upperCase").checked;
const lower = document.getElementById("lowerCase").checked;
const number = document.getElementById("number").checked;
const symbol = document.getElementById("symbol").checked;
if (upper lower number symbol === 0) {
alert("Please check atleast one box!");
return;
}
const passwordBox = document.getElementById("passwordBox");
const length = document.getElementById("length");
let password = "";
while (length.value > password.length) {
let keyToAdd = getKey[Math.floor(Math.random() * getKey.length)];
let isChecked = document.getElementById(keyToAdd.name).checked;
if (isChecked) {
password = keyToAdd();
}
}
passwordBox.innerHTML = password;
}
function copyPassword() {
const textarea = document.createElement("textarea");
const password = document.getElementById("passwordBox").innerText;
if (!password) { return; }
textarea.value = password;
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
textarea.remove();
alert("Password copied to clipboard");
}
document.querySelector("#generate").addEventListener("click", createPassword);
document.querySelector("#passwordBox").addEventListener("click", copyPassword);
The Errors i get from Google Extensions:
