I’m trying to run an existing function defined in a website using JS for a Chrome extension.
Take a look at the code below, where there is a button which when clicked runs the function refreshDisplayCanvas() and edit the variable zoomRate
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'sha256-0sXv48p25RxCUPpL+i/wI+k+w5bolBEFvagppNo+uK4='">
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'sha256-TIBrNhJNjc01RI5q77n3kKSSI1zoEfd/PoNTj3pF56w='">
<title>...</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>...</h1>
<p id="zoom-rate">Current Zoom Rate: 1</p>
<button id="zoom-in">Zoom In</button>
<button id="zoom-out">Zoom Out</button>
<script src="main.js"></script>
</body>
</html>
and here is the Javasript code:
let zoomRate = 1
document.getElementById("zoom-in").onclick = () => {
zoomRate += 0.25;
document.getElementById("zoom-rate").innerText = "Current Zoom Rate: " + zoomRate;
refreshDisplayCanvas(); // This function here is the one already defined in the website
}
document.getElementById("zoom-out").onclick = () => {
zoomRate -= 0.25;
document.getElementById("zoom-rate").innerText = "Current Zoom Rate: " + zoomRate;
refreshDisplayCanvas();
}
and lastly, here is the manifest.json file:
{
"manifest_version": 3,
"name": "...",
"version": "1.0",
"description": "...",
"action": {
"default_popup": "index.html"
},
"permissions": ["storage", "activeTab", "declarativeContent"],
"content_scripts": [
{
"js": ["content.js"],
"matches": ["https://.../*"]
}
],
"content_security_policy": { "extension_pages": "script-src 'self' 'wasm-unsafe-eval'" }
}
Note that content.js is empty.
I tried to use eval() and Function() to run the code, but the Content Security Policy thing seems to have blocked them.
Are there any solutions?