Eclaircissements sur architecture WebExtensions (background / content scripts / jquery / scripts locaux)
Bonjour à tous,
Je rencontre le problème suivant pour le développement d'une extension WebExtensions sous Firefox.
Voici un extrait des choses importantes du fichier manifest :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| "permissions": [
"tabs", "<all_urls>"
],
"web_accessible_resources": [
"interface/main_panel.html"
],
"background": {
"scripts": [
"background_scripts/background.js"
],
"persistent": true
},
"content_scripts": [
{
"js": [
"content_scripts/jquery.js", "content_scripts/highlight_elements.js"
],
"css": ["style.css"],
"run_at": "document_end"
}
] |
- via background.js je clique sur un bouton qui lance le script add_main_panel.js, qui place une iframe en bas du navigateur :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| // background.js
function add_main_panel() {
browser.tabs.executeScript({
file: '/interface/add_main_panel.js'
});
}
browser.browserAction.onClicked.addListener(add_main_panel);
// add_main_panel.js
var addonFrame = document.createElement ("iframe");
addonFrame.className = "iframeClass";
var w = window.innerWidth;
addonFrame.style = "overflow: auto; resize: both; position: fixed; bottom: 0; right: 0; width: 100%; height: 300px;";
addonFrame.src = browser.extension.getURL ("interface/main_panel.html");
document.body.appendChild (addonFrame); |
- comme on le voit si-dessus, cette iframe contient main_panel.html. Celui-ci contient un bouton <button id="select_element">Select an element</button> :
Code:
1
2
3
4
5
6
7
| <html>
<head></head>
<body style="background-color:white;">
<button id="select_row">Select a row</button>
<p>Selected element : </p><p id="selected_element"></p>
</body>
</html> |
Le problème est que je n'arrive pas à récupérer le click sur ce bouton via un script jquery, highlight_elements.js, qui est pourtant dans content_scripts (voir le manifest) :
Code:
1
2
3
| $("#select_row").on('click', function( event ) {
console.log("select row button clicked");
}); |
Pour résumer, je pense que je n'ai pas bien saisi les différentes articulations entre background / content scripts. Idem pour les scripts locaux, ou jquery ...
Merci de votre aide !
A bientôt.
Didier
