2 votes

comment charger JS à partir d'une fenêtre popup d'une extension chrome

Arrière-plan

Je veux simplement créer une extension chrome où je clique sur l'icône de l'extension, il charge une popup qui charge un fichier javascript.

J'ai pu faire un popup uniquement en html en ajoutant simplement ces deux fichiers :

manifeste.json

{
  ..    
  "browser_action": {
    "default_popup": "popup.html",
    ..
  }
}

popup.html

<html>
    ..
    hello world
</html>

problème

Je veux charger un fichier chrome page des événements afin que la page popup appelle la page d'événements et interagisse avec elle.

ce que j'ai essayé

J'ai ajouté ceci à manifeste.json

  "background": {
    "scripts": ["eventsPage.js"],
    "persistent": false
  }

et ajouté un simple eventsPage.js fichier :

chrome.runtime.onInstalled.addListener(onInit);
chrome.runtime.onStartup.addListener(onStartup);

function onInit() {
  console.log("on init");
}

function onStartup() {
  console.log("on startup");
}

if (chrome.runtime && chrome.runtime.onStartup) {
  chrome.runtime.onStartup.addListener(function() {
    console.log('on startup stuff');
  });
}

lorsque je lance l'extension et que je clique sur inspecter pour voir les outils de développement de chrome rien ne s'affiche sur la console :

enter image description here

J'ai également essayé d'ajouter le src de eventsPage.js a popup.html :

</head> 
  ..
  <script src="eventsPage.js"></script>
  <body>
  ..

mais cela ne change rien, je n'arrive même pas à trouver la source de eventsPage.js dans les outils de développement de chrome.

Comment dois-je m'y prendre ?

2voto

Haibara Ai Points 7587

De nombreuses façons :

  1. Ajouter un script par exemple popup.js en popup.html et appeler chrome.runtime.getBackgroundPage(function callback) pour interagir avec la page de l'événement.

    popup.html

    ...
    <script src="popup.js"></script>
    ...

    popup.js

    chrome.runtime.getBackgroundPage(backgroundPage => backgroundPage.testMethod());

    eventsPage.js

    const testMethod = () => console.log('test');
  2. Utilisez Passage de messages (il y a de nombreux exemples dans ce lien) pour communiquer avec la page de l'événement.

  3. Puisque vous voulez transférer des données entre la page popup et la page d'événement, il y a beaucoup d'autres solutions, par exemple, nous pourrions utiliser un stockage global tel que chrome.storage pour sauvegarder/charger/réagir aux changements.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X