Comment appeler un élément qui a été déclaré dans la page OPTION.html dans une extension Chrome?

Hassan

J'ai un élément qui est déclaré dans le fichier Option.html et qui a été enregistré dans le stockage chrome dans Option.js. Je souhaite accéder à la valeur de cet élément afin de pouvoir l'utiliser dans mon Content.js. Un moyen possible?

J'ai essayé d'appeler l'élément par son ID dans Content.js, mais cela n'a pas fonctionné! Il donne "Impossible de lire la propriété 'valeur' ​​de null", donc je suppose qu'il ne lit pas l'élément (car il n'est pas dans le même fichier).

Voici ce que j'ai:

Option.html:

<!DOCTYPE html>
<html>
<head><title>My Test Extension Options</title></head>
<body>

waiting time:
<select id="waitingTime">
 <option value="oneMin">1 minute</option>
 <option value="TwoMin">2 minutes</option>
 <option value="FourMin">4 minutes</option>
 <option value="FiveMin">5 minutes</option>
</select>

<div id="status"></div>
<button id="save">Save</button>

<script src="options.js"></script>
</body>
</html>

Option.js:

// Saves options to chrome.storage
function save_options() {
  var color = document.getElementById('waitingTime').value;
  chrome.storage.sync.set({
    favoriteColor: waitingTime,
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

Content.js (où j'appelle l'élément):

....
//the line I'm calling the element
var timeout = document.getElementById('waitingTime').value;
....

Manifest.json (j'ai ajouté une option ainsi qu'une autorisation):

....
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage", "activeTab"],
"options_page": "options.html",
....

J'apprécierais si vous m'aidiez à trouver un moyen d'accéder à la valeur "waitTime" à partir du fichier content.js! (ou toute solution alternative qui sert l'objectif).

Toan Quoc Ho

Vous avez enregistré votre valeur dans Chrome Storage à partir de options, il vous suffit maintenant de la lire à partir de là. Parce que content scriptet optionsont dans un contexte différent, tout ce que nous avons à faire est de trouver un endroit auquel ces 2 contextes peuvent se connecter, dans ce cas Chrome Storage. Ainsi:

options.js

// Saves options to chrome.storage
function save_options() {
  var color = document.getElementById('waitingTime').value;
  chrome.storage.sync.set({
    favoriteColor: waitingTime,
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

content-script.js

chrome.storage.sync.get('favoriteColor', function(result) {
    if (result && result.favoriteColor) {
        // You can use it here: result.favoriteColor
    }
});

Une chose que je veux mentionner est chrome.storage.syncet chrome.storage.local, vous le savez peut-être déjà, mais juste au cas où.

  • chrome.storage.sync, synchronisez les données entre les navigateurs Chrome auxquels vous utilisez votre compte pour vous connecter pour synchroniser les données de navigation, cela a une limitation de lecture / écriture

  • chrome.storage.localne synchronisera pas les données, il stockera simplement vos données sur le navigateur dans lequel vous avez installé l'extension. Cette fonction a une limitation de taille de stockage (ne peut stocker que des 5,242,880octets maximum ), vous pouvez lire ce document pour l'augmenter.

Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.

En cas d'infraction, veuillez [email protected] Supprimer.

modifier le
0

laisse moi dire quelques mots

0commentaires
connexionAprès avoir participé à la revue

Articles connexes

Comment invoquer une fonction en javascript qui a été déclarée dans un fichier html

Comment rediriger vers la page HTML dans l'extension Chrome

Existe-t-il un moyen d'appeler une variable qui a été déclarée dans un bloc fonction foreach?

Comment démarrer une fonction dans la console chrome lorsqu'un élément de texte dans le code html apparaît ?

Comment définir la hauteur d'un élément d'option dans Chrome sans Javascript?

Comment ajouter un élément dans un objet enum qui a été déclaré en final et compressé en jar

Comment ajouter un bouton / une image à une page à l'aide d'un script de contenu dans une extension Chrome?

Comment accéder à l'élément dans le code derrière, qui est déclaré dans une page DataTemplate in xaml dans Xamarin.Foms ?

Comment extraire un élément dans une page html

Appeler une fonction dans l'extension Chrome à partir d'un site Web

Comment utiliser Fetch pour obtenir la source HTML d'une page Web dans une extension Web Firefox ou Chrome?

Python : Comment appeler une fonction qui se trouve dans un module à l'aide d'un dictionnaire ?

Comment appeler la méthode d'un objet qui se trouve dans une collection arraylist?

Appeler une procédure dans une autre, qui a été déclarée avant elle

Comment injecter le composant d'un pochoir dans une page Web à l'aide d'une extension Chrome?

Comment appeler dynamiquement une page lorsqu'un lien déroulant dans un tableau HTML est cliqué?

Comment copier la valeur d'un élément HTML dans une autre valeur d'un élément HTML?

Comment taper une fonction qui renvoie l'élément unique dans un tableau qui vit dans une propriété d'un objet

Polymer - Comment déclencher une action sur un élément incorporé dans un élément Polymer à partir de la page dans laquelle se trouve l'élément?

Comment appeler la fonction prototype dans un élément HTML sur un événement?

Comment vérifier le nombre d'éléments d'un certain type dans une page avec Chrome Extension Dev

Comment appeler la fonction javascript avec l'événement onclick dans une autre page html

Comment affirmer la visibilité d'un élément dans une page Web?

comment identifier l'élément qui a été cliqué lors de l'ajout d'un eventListener dans une boucle for

Comment obtenir un élément HTML en javascript dans l'extension Chrome

Comment redimensionner la page POPUP.html à partir de la souris dans l'extension Chrome

Comment appeler un élément Web d'une classe à une autre classe dans Selenium Webdriver

Comment appeler une fonction qui renvoie un nombre dans l'élément Drawer en utilisant React Native ?

Comment passer une fonction qui est une propriété d'un autre objet dans une fonction et l'appeler en javascript?

TOP liste

  1. 1

    Filtrer le dataframe basé sur plusieurs colonnes d'un autre dataframe

  2. 2

    Laravel SQLSTATE [HY000] [1049] Base de données inconnue 'previous_db_name'

  3. 3

    Enregistrer le chemin de l'image de la galerie vers la base de données de la salle et l'afficher dans la liste des recycleurs

  4. 4

    Comment afficher du texte au milieu de div avec une couleur d'arrière-plan différente?

  5. 5

    Microsoft.WebApplication.targets

  6. 6

    Comment changer le navigateur par défaut en Microsoft Edge pour Jupyter Notebook sous Windows 10 ?

  7. 7

    Échec de l'exécution de 'insertBefore' sur 'Node': le paramètre 1 n'est pas de type 'Node'

  8. 8

    Empêcher l'allocation de mémoire dans la génération de combinaison récursive

  9. 9

    Comment analyser un fichier avec un tableau d'objets JSON en utilisant Node.js?

  10. 10

    comment afficher un bouton au-dessus d'un autre élément ?

  11. 11

    Comment centrer un div tout en utilisant la transition et transformer avec l'échelle

  12. 12

    Filtrer les données en fonction des conditions d'une trame de données

  13. 13

    ESP8266 HADRWARE MINUTERIE, USA pour cocher une macro étrange

  14. 14

    Comment définir du texte dans un QLabel et afficher les caractères '<>'?

  15. 15

    System.Data.SqlClient.SqlException: 'Nom de colonne non valide' ApplicationRoleId '.'

  16. 16

    Pourquoi Phantomjs ne fonctionne pas avec ce site ?

  17. 17

    Stop jQuery execution after one time execution

  18. 18

    Concaténer des variables dans ansible

  19. 19

    Comment calculer la probabilité du graphique de densité?

  20. 20

    php ajouter et fusionner des données de deux tables

  21. 21

    Redirection HTTP vers HTTPS dans Java à l'aide de HTTPURLConnection

chaudétiquette

Archive