Как построить тумблер вкл / выкл расширение Chrome - PullRequest
0 голосов
/ 18 ноября 2018

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

По сути, я пытаюсь создать расширение, которое выполняет код (например: alert ('Hi')) когда я включаю и выключаю его и буду продолжать работать на каждой странице, пока не выключу его.

Я много смотрел и не могу найти хороших ресурсов, которые могли бы объяснить, как это сделать.,У меня есть мой манифест и мой HTML-файл, и я знаю, что мне нужны файлы popup.js и background.js, но я не знаю, что поместить внутрь.

manifest.json

{
  "manifest_version": 2,
  "name": "Toggle Extension",
  "description": "My Personal Toggle Extension",
  "version": "1.0.0",
  "icons": {
    "128": "img/icon_128.png"
  },
  "browser_action": {
    "default icon": "icon.png",
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["js/background.js"]
  }
}

popup.html

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>POC Extension</title>
  <meta name="description" content="POC Extension">
  <meta name="author" content="Yann Bohbot">
  <!-- <link rel="stylesheet" href="css/popup.css"> -->
  <link rel="stylesheet" href="css/popup.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="js/popup.js"></script>
</head>
<body>
  <h2>Toggle</h2>
  <ul class="tg-list">
    <li class="tg-list-item">
      <h4>Flat</h4>
      <input type="checkbox" id="cb4" class="tgl tgl-flat" value = "Disable" />
      <label class="tgl-btn" for="cb4"></label>
    </li>
  </ul>
</body>
</html>

1 Ответ

0 голосов
/ 18 ноября 2018

расширение, которое выполняет код (например: alert ('Hi')), когда я включаю и выключаю его, и будет продолжать работать на каждой странице, пока я не выключу его.

Похоже, вам нужно много читать об этом ресурсе: Руководство по расширению Google Я бы выполнил эту задачу следующим образом:

  1. popup.html имеет файл popup.js, у которого есть функция, которая отправляет состояние вашего расширения («ON» или «OFF») в фоновый скрипт;
  2. content.js запускается на каждой вкладке в браузере и начинается с запроса к фоновому скрипту, является ли вашрасширение включено или выключено;
  3. фоновый скрипт отправляет ответ на каждый контентный скрипт с текущим состоянием вашего доп.
  4. когда скрипт контента получает ответ, он проверяет его и решает остановить или продолжить выполнение скрипта.

Итак, очевидно, что сначала вам нужен скрипт контента,Поместите этот фрагмент в файл манифеста:

"content_scripts": [
  {
    "js":         [ "content.js" ],
    "matches":    [ "<all_urls>" ],
    "all_frames": true,
    "run_at":     "document_end"
  }
],

В начале вашего content.js файла напишите:

console.log("Hello, Yann!");

chrome.runtime.sendMessage( {myQuestion: "Is it ON or OFF?"}, function(response) {
  console.log( "Extension state is: " + response.state); // should be ON
  if(response.state !== "ON") return;

  // Put the code you want to execute on every tab below:
  // ....
});

Ваш background.jsФайл должен иметь следующий фрагмент кода:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log( "Your question was: "  + request.myQuestion );

    // here we will get information whether ext is ON or OFF from the popup;

    sendResponse({state: "I don't know, but I'll find it out!"});
  });

Попробуйте, если это сработает, я постараюсь помочь с всплывающим окном.

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