Chrome меню значков расширений, которое заставляет пользователя нажимать радиокнопку и использует выбор в расширении - PullRequest
0 голосов
/ 29 марта 2020

Это мой первый вопрос, задаваемый в stackoverflow, поэтому, если я плохо отформатирую вещи или нарушу какое-то правило, пожалуйста, прости меня. Кроме того, если я не предоставил достаточно информации, просто спросите, что вам нужно.

У меня есть полностью работающее расширение Chrome. В настоящее время расширение показывает все данные, которые существуют для пользователя. Я хотел бы создать всплывающее окно, когда пользователь нажимает на значок расширения, и предоставить им два варианта стиля переключателей. Выбор «Все» по умолчанию будет отмечен, а второй вариант будет «Частичный». В зависимости от того, что выберет пользователь, я бы хотел, чтобы расширение показывало все данные или только частичные данные.

Я поэкспериментировал с файлом манифеста. json и могу создать всплывающее окно с помощью переключателя выбор. Что я не могу понять, так это как получить доступ к этому выбору в моем контенте. js код, чтобы определить, что выберет пользователь, а затем то, что ему показывают. Кроме того, я не могу понять, как сохранить состояние выбора, который они делают. Другими словами, в настоящее время, если я щелкаю по значку и выбираю «Частично», при следующем щелчке по нему он по умолчанию возвращается к проверенному состоянию «Все» (поскольку код сообщает, что это значение по умолчанию). Кроме того, в идеале это состояние будет сохранено, даже если они закроют браузер и вернутся через 2 недели (или через какое-то время). Это также спасло бы состояние, если бы они полностью перезагрузили компьютер.

Можно ли это сделать? Если так, то как? И для сохранения состояния, и для доступа к выбору, который они делают в моем javascript. Заранее благодарю за любую оказанную помощь.

'' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' * РЕДАКТИРОВАТЬ: Новый Детали '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' ' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '

Я очень нуб, когда дело доходит до сети развитие. Мне потребовались месяцы, чтобы заставить работать Chrome расширение. Последние несколько дней я потратил на исследование chrome хранилища и различных примеров, чтобы безуспешно достичь желаемого. Поскольку я также новичок в stackoverflow, я собираюсь попробовать и предоставить некоторый красиво отформатированный код в надежде получить более конкретную c дополнительную помощь. Здесь идет.

манифест. json

{
  "manifest_version": 2,
  "name": "My Super Extension",
  "description": "My Super Extension Description.",
  "version": "2.7.1",
  "web_accessible_resources": [
    "icon-32.png"
  ],
  "content_scripts": [{
    "matches": [
      "*://*.url1/*",
      "*://*.url2/*",
      "*://*.url3/*",
      "*://url4/*"    
    ],
    "js": [
      "content.js"
    ],
    "css": [
      "content.css"
    ],
    "run_at": "document_idle"
  }],
  "permissions" : [
    "https://raw.githubusercontent.com/*",
    "storage"
  ],
  "browser_action": {
    "default_icon": {
      "32": "icon-32.png",
      "48": "icon-48.png",
      "128": "icon-128.png"
    },
  "default_title": "Click for GCV Options",
  "default_popup": "popup.html"
  }
}

всплывающее окно. html

<!doctype html>
<html>
  <head>
    <style>
      * {box-sizing: border-box;}
      body {width: 160px;}
    </style>
    <script src="popup.js"></script>
  </head>
  <body>
    <input type="radio" name="GCVType" checked>Everything
    <input type="radio" name="GCVType">Cards Only
  </body>
</html>

I Я предполагаю, что во всплывающем окне. js я должен поместить код, который может извлечь из хранилища (возможно) ранее сохраненное состояние и сохранить выбранный в данный момент выбор в хранилище.

После исследования я нашел следующий пример он-лайн, но просто не мог изменить его соответствующим образом, чтобы заставить его работать в моей ситуации:

всплывающее окно. js

function save_options(){
  var GCV-Key = document.getElementById('GCV-Key').value;

  chrome.storage.sync.set({
    'GCV-Key': GCV-Key
  };
}

function restore_options(){

  chrome.storage.sync.get({
    'GCV-Key': ''
  },
  function(items){
    document.getElementById('GCV-Key').value = items.GCV-Key;
  });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click',
    save_options);

Я точно знаю функция (элементы) должна быть изменена, чтобы отражать то, что будет существовать в моем контенте. js файл для проверки значения.

Вот что ДОЛЖНО произойти:

1) По сути, пользователь будет нажимать «Все» или «Только карты» во всплывающем окне (с первоначальным выбором - при первом запуске - «Все»).

2) Если пользователь делает не нажимайте ничего (или никогда не нажимайте на значок расширения), я хочу, чтобы значение было «Все». Кроме того, я хочу, чтобы любое выбранное значение было сохранено, чтобы, если они нажмут на значок расширения при последующем посещении, то, что они ранее сохранили, все еще было там.

3) Когда выполняется контент. js, Я хочу проверить значение сохраненного выбора радиокнопок и изменить значение a "const files = ['a', 'b', 'c']" на "a, b, c "если Все - это сохраненное значение, или измените его на" a, b ", если только карты - это сохраненное значение.

Чтобы выполнить sh 3) выше, мне, очевидно, нужен какой-то вид слушатель внутри контента. js, чтобы при изменении значения в хранилище значение «const files» могло изменяться соответствующим образом.

Я просто не знаю точных строк, необходимых для достижения вышеизложенного. Я также не смог придумать это после долгих проб / ошибок за последние несколько дней. Таким образом, любая помощь будет высоко ценится ... кредит будет предоставлен в рамках продления. Спасибо.

1 Ответ

0 голосов
/ 29 марта 2020

Вы можете использовать API chrome.storage, чтобы сохранить свое состояние в хранилище, а затем прочитать его, когда вам это нужно. Добавьте прослушиватель изменений на ваш радиовход и сохраните выбранное состояние в обработчике событий. Когда всплывающее окно открыто, прочитайте состояние из хранилища и соответственно установите значение радиовхода.

https://developer.chrome.com/apps/storage

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