Question

即时制作Chrome扩展程序，我在加载文件时遇到问题... 我想在popup.html文件中选择一个选项时加载文件例如，如果我选择option1我想要eventPage1.js，要加载，如果我选择option2我希望eventPage2.js加载，而不是两个同时加载<!DOCTYPE html> <html> <form> Paises en el menu contextual: <br> <div> <input type="radio" id="opcion1" name="opcion" value="opcion1" onclick= <script src="eventPage1.js"></script> <label for="opcion1">Todos los paises</label> <input type="radio" id="opcion2" name="opcion" value="opcion2" onclick= <script src="eventPage2.js"></script> <label for="opcion2">Solo Mexico</label> </div> </form> </body> </html>时间，只有一个。

这是我的popup.html文件

{
"manifest_version": 2,
"name": "help me",
"author": "me man",
"version": "1.1.4",
"description": "test test",
"browser_action":
 {
  "default_icon": "icon-large.png",
  "default_popup": "popup.html"
 },
  
  "background": {
    "scripts": ["menuSelection.js"]
 },	
  "permissions": [
	"storage",
	"contextMenus"
  ],
  "icons": {
          "16": "icon-bitty.png",
          "48": "icon-small.png",
          "128": "icon-large.png"
 }
}

每个eventpage文件，它的上下文菜单......

这是我的清单文件的样子

currNode->next = NULL;

我有另一个问题，当我选择一个选项时......在存储中保存该选项，所以每当我使用扩展时它会自动加载该选项

Answer 1

活动页面是在manifest.json的"background"部分中使用"persistent": false声明的页面的技术术语。它不仅仅是一个名字。它是一个特殊的上下文，仅存在于该单个隐藏页面。请务必阅读extension architecture overview。
出于安全原因（html中的onclick属性），html文件中的内联代码默认不在扩展页中工作。在单独的js文件中处理所有事件
html中的input标记未关闭，实际上格式不正确。没有开放<body>。
要保存选项，请使用chrome.storage API或旧的原始字符串localStorage
要动态加载js文件，请将script元素动态添加到head，并将src属性设置为要加载的文件的名称。或者使用现代require()方法。但是，您可能希望使用单个脚本文件开始学习。
请勿使用form：浏览器不是网络服务器，因此无法提交网页。它只会重新加载，您将丢失所有数据。当然，您可以阻止侦听器中的submit事件，但它无法使用form。而是立即处理更改。

popup.html：

<!DOCTYPE html>
<html>
<body>
  Paises en el menu contextual:
  <div>
    <label><input type="radio" name="opcion" value="opcion1">Todos los paises</label>
    <label><input type="radio" name="opcion" value="opcion2">Solo Mexico</label>
  </div>
  <script src="popup.js"></script>
</body>
</html>

popup.js：

function setRadio(name, value) {
  const el = document.querySelector(`input[name="${name}"][value="${value}"]`);
  if (el && !el.checked) {
    el.checked = true;
  }
}

chrome.storage.sync.get('opcion', data => {
  setRadio('opcion', data.opcion);
});

document.onchange = event => {
  if (event.target.name == 'opcion') {
    const value = event.target.value;
    chrome.storage.sync.set({opcion: value});

    switch (value) {
      case 'opcion1':
        doSomething1();
        break;
      case 'opcion2':
        doSomething2();
        break;
    }
  }
};

chrome.storage.onChanged.addListener((changes, area) => {
  if (area == 'sync' && 'opcion' in changes) {
    setRadio('opcion', changes.opcion.newValue);
  }
});

Answer 2

我认为当您点击所选选项时，您可能会想要这样做：

<script type="text/javascript">


    function LoadJavascriptFile(fileToLoad){  
        var script = document.createElement("script");
        script.id = "customScript";
        script.type = "text/javascript";
        script.src = "fileToLoad"; 
        document.getElementsByTagName("head")[0].appendChild(script);
    }


</script>

在你选项上选择你打电话

LoadJavascriptFile("PathToMyFile.js")

然后，您要检查标题中是否存在脚本ID。如果是，则更新SRC，否则创建SRC

当我在popup.html

2 个答案: