This article introduces concepts that help build Microsoft edge extensions. Pay attention to how the multi-tabbed browser works.

Understand how browsers work

The following list Outlines useful information to know before building an extension.

  1. Each browser TAB is isolated from all other tabs. Each TAB runs in a separate thread, which is isolated from other browser tabs and threads.

    One thread per browser TAB

  2. Each TAB handles one GET request. Each TAB uses a URL to fetch a single data stream, which is typically an HTML document. The single stream or page contains JavaScript instructions, including tags, image references, CSS references, and so on. All resources are downloaded to the TAB page and rendered in the TAB.

  3. Each TAB communicates with the remote server. Each TAB runs in isolation. Each TAB is still connected to the Internet, but each TAB is isolated from the others. The TAB can run JavaScript to communicate with the server. The server is the server that feeds the first GET request entered into the TAB URL bar.

  4. The extension model uses a different communication model. Like TAB pages, extensions run in a single thread isolated from other TAB page threads. The TAB sends a single GET request to the remote server, and then renders the page. However, the extension works like a remote server. Install the extension in the browser to create a separate Web server in the browser. The extension isolates from all TAB pages.

    Extensions use different communication modes

Extend the architecture

The following list summarizes useful information related to extended architectures.

  1. Extended Web server bundle. An extension is a bundle of Web resources. Web resources are similar to other resources that you (a Web developer) publish to a Web server. When you build the extension, bundle the Web resources into a zip file.

    Zip files include HTML, CSS, JavaScript, and image files. One more file is needed at the root of the zip file. The other file is the named manifest file. The manifest file is a blueprint for the extension, including the version of the extension, the title, the permissions required to run the extension, and so on. manifest.json

  2. Start the extension server. The Web server contains your Web bundle. The browser navigates to the grid on the server and downloads the file to render in the browser. The browser uses certificates and configuration files to navigate. If a file is specified, the file is stored in a specific location on the Web server. index.html

    When you use an extension, the browser’s TAB page uses the extension runtime to reach the extension’s Web bundle. The extension runtime serves a file from the URL that is a unique identifier assigned to the extension during installation. Each extension uses a different unique identifier. Each identifier points to the Web bundle installed in the browser. extension://{some-long-unique-identifier}/index.html“{some-long-unique-identifier}

  3. Extensions may communicate with tabs and browser toolbars. Extensions may interact with the browser’s toolbar. Each extension manager runs TAB pages in a separate thread, and DOM operations on each TAB page are isolated. Extensions use extension apis to communicate between extensions and TAB pages. The extended API provides additional functionality, including notification management, storage management, and more.

    Just like a Web server, the extension waits for notification when the browser opens. The extension and TAB pages run in separate threads. To allow the extension to work with any TAB page, use the extension API and set permissions in the manifest file.

  4. The extension provides opt-in privileges at installation time. You specify extension permissions in the file. When the user installs the extension, information is displayed about the permissions required for the extension. Depending on the type of permission required, the extension can extract and use information from the browser. manifest.json

Subsequent steps

For information about starting with extensions, navigate to create an extension tutorial.