Как я могу вызвать элемент, который был объявлен на странице OPTION.html в расширении Chrome? - PullRequest
0 голосов
/ 05 октября 2019

У меня есть элемент, который объявлен в файле Option.html и сохранен в хранилище chrome в Option.js. Я хочу получить доступ к значению этого элемента, чтобы я мог использовать его в моем Content.js. Любой возможный способ?

Я пытался вызвать элемент по его идентификатору в Content.js, но это не сработало! Он выдает «Cannot read свойство 'value' of null", поэтому я предполагаю, что он не читает элемент (поскольку он не находится в том же файле).

Вот что у меня есть:

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 (где я называю элемент):

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

Manifest.json (Iдобавлена ​​опция, а также разрешение):

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

Буду признателен, если вы поможете мне найти способ доступа к значению "waitTime" из файла content.js! (или любое альтернативное решение, которое служит цели).

1 Ответ

1 голос
/ 05 октября 2019

Вы сохранили свое значение в Chrome Storage из options, поэтому теперь вам просто нужно прочитать его оттуда. Поскольку content script и option находятся в другом контексте, поэтому все, что нам нужно сделать, - это найти место, к которому эти 2 контекста могут подключиться, в данном случае это Chrome Storage. Вот так:

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
    }
});

Одна вещь, которую яхочу упомянуть chrome.storage.sync и chrome.storage.local, вы можете знать это уже, но на всякий случай.

  • chrome.storage.sync, синхронизируйте данные между браузерами Chrome, которые вы используете для входа в свою учетную записьдля синхронизации просмотра данных, это имеет ограничение чтения / записи

  • chrome.storage.local не будет синхронизировать данные, в основном это просто сохранить ваши данные в браузере, которыйВы установили расширение. Эта функция имеет ограничение размера хранилища (можно хранить только 5,242,880 байт), вы можете прочитать этот документ , чтобы увеличить его.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...