Javascript 将命令从Chrome扩展弹出窗口发送到"；新标签"；内容页_Javascript_Html_Google Chrome Extension_Popup

Javascript 将命令从Chrome扩展弹出窗口发送到"；新标签"；内容页

javascript html google-chrome-extension

Javascript 将命令从Chrome扩展弹出窗口发送到"；新标签"；内容页,javascript,html,google-chrome-extension,popup,Javascript,Html,Google Chrome Extension,Popup,我不熟悉chrome扩展，对不同文件之间的交互方式仍不清楚。“我的扩展名”在“新建”选项卡屏幕上显示一个html文件。目标是让我的设置位于chrome扩展的弹出屏幕中。我无法将命令从弹出窗口发送到index.html文件以显示更改对于这个例子，我试图有一个光明和黑暗的模式，改变时，切换开关在弹出框中改变关键是在弹出窗口中单击按钮时，将数据主题从亮切换到暗，反之亦然任何关于我做错了什么的帮助/解释都会有所帮助。多谢各位 index.html-至少相关部分 <!DOCTYPE html

我不熟悉chrome扩展，对不同文件之间的交互方式仍不清楚。“我的扩展名”在“新建”选项卡屏幕上显示一个html文件。目标是让我的设置位于chrome扩展的弹出屏幕中。我无法将命令从弹出窗口发送到index.html文件以显示更改

对于这个例子，我试图有一个光明和黑暗的模式，改变时，切换开关在弹出框中改变

关键是在弹出窗口中单击按钮时，将数据主题从亮切换到暗，反之亦然

任何关于我做错了什么的帮助/解释都会有所帮助。多谢各位

index.html-至少相关部分

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

完全删除“content_scripts”部分，并将content.js重命名为popup.js，通过标准的

标记将index.js添加到index.html，从index.html中删除content.js，然后看我假设您指的是“3”是我的情况下的最佳解决方案？#1也很好，良好的ol'localStorage没有问题。顺便说一句，在现代浏览器中，你可以使用

首选颜色方案

CSS，而不是手动切换，或者除了手动切换之外。我不太明白popup.js文件在该示例中的用途。localStorage.sharedData=JSON.stringify（{foo:123，bar:[1,2,3]，主题：'light'}）；我是否需要替换其中任何一个以使其与我的代码一起工作？popup.js是popup.html的脚本文件，如果您需要存储一些数据以响应弹出窗口中的用户操作。

{
"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>
<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>

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