概述

阅读此概述并开始使用后，您可以开始创建应用程序（扩展）和。

注：由于是通过申请（扩展）方式实现的，因此除非另有说明，本页面所有内容均适用。

基本概念

应用程序（扩展）实际上是一组压缩在一起的文件，包括 HTML、CSS、脚本、图像文件和任何其他所需的文件。 应用程序（扩展程序）本质上是网页，它们可以使用浏览器提供的所有 API360浏览器扩展，从 JSON 到 HTML5。

应用程序（扩展）可以与网页交互360浏览器扩展，或者通过或跨过服务器与服务器交互。 应用程序（扩展程序）还可以访问浏览器提供的内部功能，例如选项卡或书签等。

应用（扩展）接口

很多应用程序（未包含）都会以页面或页面的形式显示在浏览器界面上。 每个应用程序（扩展程序）最多可以有一个或一页。 当是否显示应用程序（扩展）图标取决于单个页面时，应选择页面； 其他情况也可以选择。

使用这个gmail提醒应用程序，它在工具栏上添加了一个图标

也用这个新闻阅读应用。 点击后，会弹出一个气泡窗口。

该地图应用程序使用页面和（注入页面执行的脚本）

应用程序还可以通过其他方式提供界面，例如添加上下文菜单、提供选项页面或使用更改页面显示的页面。 应用程序（扩展）功能和实现细节的完整列表可以在开发指南中找到。

界面

通常打包一个包含主要功能的 html 页面。

有关更多信息，请参阅应用程序。

文档

每个应用程序（扩展）应包含以下文件：

开发应用程序（扩展）时，需要将这些文件放在同一目录中。 发布应用程序（扩展名）时，该目录全部打包成一个压缩文件，应用程序（扩展名）名称为.crx。 如果您使用360安全浏览器应用开放平台或上传应用程序（扩展名），可以自动生成.crx文件。

参考资料

任何需要的文件都可以放入应用程序（扩展）中，但是如何使用它们呢？ 一般来说，您可以使用相对地址来引用文件，就像在普通 HTML 文件中一样。 以下示例演示如何引用子目录中的 .png 文件：

src="images/myimage.png">

如果使用360快捷版内置的调试器（开发者工具），可以看到每个应用程序（扩展）中的文件也可以用绝对路径来表示：

-:///

此 URL 中包含为每个应用程序（扩展）生成的唯一 ID。 从://页面，您可以看到所有已安装应用程序（扩展）的唯一ID。

是文件在应用程序（扩展）目录下的路径，即它的相对路径。

在这个URL中，名为.json的文件包含了应用程序（扩展程序）的基本信息，例如最重要的文件列表、应用程序（扩展程序）所需的权限等。以下是一个典型的应用程序（扩展程序）使用和访问

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": { "128": "icon_128.png" },
  "background": {
    "persistent": false,
    "scripts": ["bg.js"]
  },
  "permissions": ["http://*.google.com/", "https://*.google.com/"],
  "browser_action": {
    "default_title": "",
    "default_icon": "icon_19.png",
    "default_popup": "popup.html"
  }
}

详细信息请参见文件。

基本架构

大多数应用程序（扩展程序）都包含一个后台页面（页面），用于执行应用程序（扩展程序）的主要功能。

上图显示了安装了两个应用程序（扩展）的浏览器。 两个应用程序（扩展）由黄色图标表示，页面由蓝色图标表示。 和代码在 .html 文件中定义。 在两个窗口中均有效。

页

背景页面不是应用程序（扩展程序）中的唯一页面。 例如，可以包含一个弹出窗口，该弹出窗口是利用html页面来实现的。 应用程序（扩展）还可以使用 .tabs.() 或 .open() 来显示内部 HTML 文件。

应用程序（扩展）中的HTML页面可以访问彼此各自DOM树中的所有元素，或者调用彼此的函数。

下图显示了弹出窗口的架构。 弹出窗口的内容是由 HTML 文件 (popup.html) 定义的网页。 它不必复制后台页面（.html）中的代码，因为它可以直接调用后台页面中的函数。

更多详细信息可以在 和 中找到。

如果应用程序（扩展程序）需要与网页交互，则需要使用一个。 脚本是指可以在浏览器加载的页面内运行的脚本。 将其视为网页的一部分，而不是它所在的应用程序（扩展）的一部分。

您可以获取浏览器访问的网页的详细信息，并对页面进行修改。 下图展示了一个可以读取和修改当前页面的DOM树。 但它无法修改其所在应用程序（扩展程序）后台页面的DOM树。

它并没有与它所在的应用程序（扩展程序）完全断开连接。脚本可以与其所在的应用程序（扩展程序）交换消息，如下图所示。 例如，当从属页面发现 RSS 提要时，它可以发送消息。 或者后台页面发送消息，请求修改网页内容。

更多信息可以查看。

页面之间的通信

应用程序（扩展）中的 HTML 页面通常需要相互通信。 由于应用程序（扩展）的所有页面都运行在同一进程的同一线程中，因此它们可以直接调用彼此的函数。

您可以使用 中的方法。 获取应用程序（扩展）中的页面，如()和()。 一旦页面获得对应用程序（扩展）中另一个页面的引用，它就可以调用被引用页面中的函数并操作被引用页面的 DOM 树。

保存数据和隐身模式

应用程序（扩展程序）可以使用HTML5的Web API（例如）来保存数据，或者向服务器发出请求来保存数据。 当您需要保存数据时，首先需要确定请求是否是从隐身模式窗口发出的。 默认情况下，应用程序（扩展程序）不会在隐身模式下运行； 需要明确用户到底需要在隐身模式下应用（扩展）或做什么。

隐身模式可确保在此窗口中浏览不会留下任何痕迹。 处理来自隐身窗口的数据时必须遵循这个前提。 例如，如果应用程序（扩展程序）的功能是将浏览历史记录保存在云（服务器）中，则不要在隐身模式下保存浏览历史记录。 另一方面，应用程序（扩展）数据可以保存在任何窗口中，无论是否不可见。

重要规则：如果一条数据可能表明用户在网上看到或做了什么，请不要以隐身模式保存它。

要检查窗口是否处于隐身模式，请检查选项卡或对象的属性。 例如：

function saveTabData(tab, data) {
  if (tab.incognito) {
    chrome.runtime.getBackgroundPage(function(bgPage) {
      bgPage[tab.url] = data;      // Persist data ONLY in memory
    });
  } else {
    localStorage[tab.url] = data;  // OK to store data
  }
}

跟进

现在已经介绍了应用程序（扩展）的基础知识，您可以开始编写自己的应用程序（扩展）了。 更多信息请参考：