Integrate JQuery to add-on

Good community, first of all grateful for your attention, you have helped me in the various topics I have posted, now I find myself with another problem. I have reviewed in the forum and none of the topics that have posted is my case, to see if I explain, my idea is not to use JQuery to interact with the pages I visit, but in my case, pressing a button calls me a JQuery function, this because it is not possible to use events Onclick. Attached screenshot for better understanding.


It should be noted that the extension is being displayed in the Developer Tools panel. So, what I want is to execute a function by clicking on the button you see in the capture, for example an alert, now I show the encoding of my files.
This is the HTML that is rendered in the capture (Panel.html)

<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <a href="#" id="btn" style="background: blue; color: white; padding: 3px; text-decoration: none; margin-top: 100px;margin-left: 100px;">Hit me!!</a>
</body>
</html>

manifest.json

{
    "manifest_version": 2,
    "name": "The Name",
    "version": "1.0",
    "description": "The Description",
    "author": "Pedro Torcatt",
    "developer": {
        "name": "Pedro Torcatt"
    },

"icons": {
    "48": "src/icon.png"
},

"devtools_page": "devtools.html",

"background": {
    "scripts": [
      "js/jquery.js",
      "js/scripts.js"
	]
},

"permissions": [
	"<all_urls>",
	"activeTab",
	"webRequest",
	"webRequestBlocking"
]}

devtools.html

<html>
	<head>
                <meta charset="utf-8">
	</head>
	<body>
		<script src="js/devtools.js"></script>
	</body>
</html>

scripts.js

$(document).ready(function () {
    $("#btn").click(function() 
    {
        alert("You hit me, savage.");
    });
});

Then, when I press the button nothing happens, and the browser console doesn’t throw errors at me either. Yes, it’s a bit extensive, but I hope you can help me integrate JQuery correctly into my add-on.

I see nothing wrong with the code. However, maybe alert is blocked in the dev tools window?
Does the console show an error?

Nevertheless it is usually not recommend to include such big JS libraries for simple add-ons. Also even the general web development trend is to move away from jQuery, see https://plainjs.com/.

Please also read/mind these rules, if you want to publish your extension on AMO:

2 Likes

I haven’t created a devtools panel or seen one in action. However, by analogy to popup pages, I would think you set up your event handlers for devtools.html in your devtools.js file, not in a background script. ??

1 Like