javascript - 如何创建具有多个 View 的 chrome 扩展

标签 javascript google-chrome google-chrome-extension

我一直在寻找一段时间,但找不到在 chrome 扩展程序中的不同 html View 之间切换的方法。我正在使用用户登录创建和扩展,并希望在用户登录后切换到 profile.html View 。我已经尝试了下面的方法,但这只会打开一个弹出窗口,是否可以在它加载的地方执行它html 页面进入当前扩展 View ?或者是通过 javascrip 编辑扩展 View 的唯一方法?

    chrome.windows.create(
      {
        tabId:      newTab.id,
        type:       "popup",
        url:        chrome.extension.getURL('user_profile.html'),
        focused: true
      }, function(window){
          //
        });
  });

最佳答案

有多种方法可以做到这一点,但最简单的方法是将其视为单页应用程序。您不会根据用户操作更改 View ,而是根据上下文提供内容。

也就是说,我经常看到有两种方法可以做到这一点:

  1. 使用 iFrame。我不是这个的忠实粉丝,但如果您有现有的服务器端呈现页面,这是最简单的解决方案。从本质上讲,您只需让 iFrame 占据您需要的大小,然后更新它的源代码并让框架根据需要进行导航。
  2. 使用 javascript 提供所需的内容。这可能是大多数情况下的最佳解决方案。根据您拥有的任何上下文,使用 javascript 模板来更新用户看到的内容。有太多不同(和好的)方法可以完成此任务,因此无法在此处提供具体代码,但谷歌搜索应该非常容易。

关于javascript - 如何创建具有多个 View 的 chrome 扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32042940/

相关文章:

javascript - 我如何制作这样的菜单?

html - 红色的 Chrome 输入框

html - 为什么 chrome 会在我表单的其中一个字段中显示地址建议?

javascript - fullCalendar 自定义事件函数抛出非函数错误

winapi - 如何在 JAVAScript 中调用 Windows API 函数?

javascript - 从 JavaScript 控制台查找和操作 React.js 组件

javascript - 在 popup.html Chrome 扩展程序中保存用户首选项

javascript - ASCII 代码在 Firefox 中不起作用,但在 Chrome 上工作正常

css - Chrome 自动刷新 css/less 更改

javascript - 删除 Javascript 中某些属性(不是 ID)的划分