I want to create a chrome extension which will get the current URL of open tab then modify it and finally open a new tab with modified URL.
Here are the files
Manifest.json(V3):
{
"name": "EDA View Modes",
"version": "0.1.0",
"description": "Base Level Extension",
"manifest_version": 3,
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self';"
},
"action": {
"default_popup": "popup.html"
},
"host_permissions": [
"https://developer.chrome.com/*",
"http://*/*",
"https://*/*"
],
"permissions": [
"tabs",
"activeTab"
]
}
popup.html:
<!DOCTYPE html>
<html>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Security-Policy"
content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<link rel="stylesheet" href="./popup.css" />
<head>
<title>Eda View Mode</title>
</head>
<body>
<center>
<div class="box">
<select id="selected">
<option> JSON </option>
<option> JSON Text</option>
<option> Edit </option>
<option> Expert Edit </option>
</select>
<button id="next">
Next
</button>
</div>
</center>
<script type="module">
document.getElementById("next").addEventListener("click", create_tab);
function create_tab() {
chrome.runtime.onInstalled.addListener(async () => {
chrome.tabs.create({
url: 'https://google.com'
});
});
}
</script>
</body>
</html>
popup.css:
body {
width: 250px;
height: 50px;
justify-content: center;
align-items: center;
}
.box {
justify-content: center;
align-items: center;
position: relative;
}
I am trying to run a simple script yet getting blocked by CSP! have tried various methods on internet also tried to go through docs but it is all confusing
