Отправка команды из Chrome Расширение Всплывающего на страницу содержимого «Новая вкладка» - PullRequest
Новая
       61

Отправка команды из Chrome Расширение Всплывающего на страницу содержимого «Новая вкладка»

0 голосов
/ 20 января 2020

Я новичок в chrome расширениях и до сих пор неясен, как различные файлы взаимодействуют друг с другом. Мое расширение отображает файл html на экране новой вкладки. Цель состоит в том, чтобы мои настройки находились во всплывающем экране расширения chrome. У меня проблемы с отправкой команды из всплывающего окна в файл индекса. html для отображения изменений.

В этом примере я пытаюсь использовать светлый и темный режим, который меняется, когда тумблер изменено во всплывающем окне.

Смысл в том, чтобы тема данных была переключена со светлой на темную или наоборот, когда во всплывающем окне нажимается кнопка.

Любая помощь / объяснение то, что я делаю неправильно, было бы полезно. Спасибо.

index. html - релевантная часть по крайней мере 

<!DOCTYPE html>
<html lang="en" data-theme="light">
    <head>
  <script src="../content.js"></script>
    </head>
</html>

манифест. json

{
"manifest_version": 2,
"name": "Esports Dashboard",
"version": "1.0",
"content_scripts": [
  {
    "matches": [
      "<all_urls>"
    ],
    "js": ["content.js"]
  }
],
"background": {
  "scripts": ["background.js"]
},

"permissions": [
  "tabs",
  "storage"
],

"default_icon": "favicon48.jpg",
"icons": {
      "16": "favicon16.jpg",
      "48": "favicon48.jpg"
          },

"browser_action": {
  "default_icon": "favicon48.jpg",
  "default_popup": "popUp.html",
  "default_title": "Esports Dashboard"
},

"chrome_url_overrides": {
  "newtab": "main/index.html"
}
}

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

<html>
<head>
<link rel="stylesheet" href="stylepopup.css">
<script src="content.js"></script>
</head>

<body>

  <div class="popupTitle"></div>
  <div class="popupContainer">
    <h3 class="spoilerSetting">Spoiler Default</h3>
    <form class="spoilerToggle">
      <input type="checkbox" id="toggleSpoiler" class="checkboxSpoiler"></input>
      <label for="toggleSpoiler" class="switchSpoiler"></label>
    </form>
    <h3 class="darkModeSetting">Dark Mode</h3>
    <form class="darkModeToggle">
      <input type="checkbox" id="toggleDarkMode" class="checkboxDarkMode"></input>
      <label for="toggleDarkMode" class="switchDarkMode"></label>
    </form>
  </div>



</body>

</html>

содержание. js

document.addEventListener('DOMContentLoaded', function() {
  var checkPageButton = document.getElementById('toggleDarkMode');
  var checkboxDarkMode = document.querySelector('input[name=theme]');

  checkboxDarkMode.addEventListener('change', function() {
    if(this.checked){
      document.documentElement.setAttribute('data-theme', 'dark')
    }
    else {
      document.documentElement.setAttribute('data-theme', 'light')
    }
  })
})
...