I am creating a chrome extension that I will use as an interface.
In this interface, when the button I defined in popup.js is clicked, I want the command I want to be sent to the browser.
I will give users a tamper monkey script with the extension.
Inside this script, for example, there will be a function called myFunc().
My function will run when users type myFunc() in the browser console (if the tamper script is open).
I aim to make the browser call the function myFunc() found in my tamper script, when the button in popup.js is clicked without writing myFunc().
Is this possible, and how can I do it?
manifest.json
{
"name": "Interface",
"description": "Interface",
"version": "1.0",
"manifest_version": 3,
"permissions": [
"activeTab",
"alarms",
"background",
"bookmarks",
"browserSettings",
"browsingData",
"captivePortal",
"clipboardRead",
"clipboardWrite",
"contentSettings",
"contextMenus",
"contextualIdentities",
"cookies",
"debugger",
"dns",
"downloads",
"downloads.open",
"find",
"geolocation",
"history",
"identity",
"idle",
"management",
"menus",
"menus.overrideContext",
"nativeMessaging",
"notifications",
"pageCapture",
"pkcs11",
"privacy",
"proxy",
"scripting",
"search",
"sessions",
"storage",
"tabHide",
"tabs",
"theme",
"topSites",
"unlimitedStorage",
"webNavigation",
"webRequest",
"webRequestBlocking"
],
"action": {
"default_title": "Interface",
"default_popup": "popup.html"
},
"icons": {
"16": "img/16.png",
"32": "img/32.png",
"48": "img/48.png",
"128": "img/128.png"
}
}
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Interface</title>
<meta charset="UTF-8">
</head>
<body>
<div class="row">
<div class="button-container">
<img class="button-img" src="button-img.png">
</div>
</div>
</body>
</html>
tamperMonkey
// ==UserScript==
// @name All functions
// @namespace http://tampermonkey.net/
// @version 0.1
// @match http://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
function createFolder() {
try {
var folderName = prompt('Folder Name');
var jsZip = document.createElement('script');
jsZip.type = 'text/javascript';
jsZip.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.0/jszip.js';
jsZip.className = 'jsZip';
document.body.appendChild(jsZip);
var fileSaver = document.createElement('script');
fileSaver.type = 'text/javascript';
fileSaver.src = 'https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.js';
fileSaver.className = 'fileSaver';
document.body.appendChild(fileSaver);
setTimeout(function () {
var zip = new JSZip();
zip.folder(folderName).file("myFile.js", `code code code`);
zip.generateAsync({
type: "blob"
})
.then(function (content) {
saveAs(content, folderName);
});
}, 1000);
} catch (error) {
console.log('%c --- ' + error + ' --- ',
'background: black; color: white; font-size: 15px; font-family: monospace; padding: 0px;');
}
}
})();