Getting started with chrome ext security from 0 (1) — understanding a chrome ext


Author: lorexxar ‘@ know Chuangyu 404 Laboratory
Time: November 21, 2019
Original text:

In early 2019, Microsoft officially chose chromium as the default browser and abandoned the development of edge. On April 8, 19, edge officially released the edge dev browser based on chromium, and provided supporting plug-in management compatible with chrome ext. In addition, most domestic browsers, large and small, are developed based on chromium, and the plug-in system of chrome is increasingly affecting the majority of the population.

In this context, the security of chrome ext should also be paid attention to. Starting from 0, getting started with chrome ext security will start with the most basic plug-in development, and gradually study the malicious security issues of plug-ins themselves, and how malicious web pages exploit plug-in vulnerabilities to attack browsers.

In the first part, we will talk about the basics of chrome ext.

Get the code of a plug-in

The existence mode of chrome ext is similar to adding a new layer of interpreter in the browser layer. When we visit the web page, the plug-in will load the corresponding HTML, JS, CSS, and explain the implementation.

So the code of chrome ext is HTML, JS and CSS. How can we get the plug-in code?

When we visit the extension page, we can get the corresponding plug-in ID
Getting started with chrome ext security from 0 (1) -- understanding a chrome ext

And then we can https://chrome-extension-down… Download the corresponding CRX package from.

Change the name of CRX to zip and unzip it
Getting started with chrome ext security from 0 (1) -- understanding a chrome ext


An important file in the plug-in code is manifest.json , in manifest.json In the configuration file, we can find the most important part of a plug-in.

First, there are several important fields

  • browser_action
    This field is mainly used to expand the pop-up content after clicking on the icon popup.html
  • content_scripts
    Matches represents the time when scripts are inserted, and the default is document_ Idle stands for idle page
    JS stands for the inserted scripts file path
    run_ At defines which pages need scripts to be inserted
  • permissions
    This field defines the permissions of the plug-in, including the permission definitions from the browser tab, history, cookie, and page data
  • content_security_policy
    This field defines the CSP of the plug-in page
    But this field does not affect content_ Scripts in scripts
  • background
    This field defines the background page of the plug-in. By default, this page runs continuously in the background, only when the browser is turned on and off
    Persistent defines the path corresponding to the background page
    Page defines the HTML page in the background
    Scripts when the value is false, the background page will not run all the time in the background

Before starting the research on chrome plug-ins, in addition to manifest.json In addition to the configuration of chrome, we also need to understand the plug-in structure built around chrome.

Main presentation methods of chrome ext
Browseraction – upper right corner of browser
Getting started with chrome ext security from 0 (1) -- understanding a chrome ext

Click on the top right corner of the browser to trigger mainfest.json Mediumbrowser_action

 "browser_action": {
      "default_icon": "img/header.jpg",
      "default_title": "LoRexxar Tools",
      "default_popup": "popup.html"

Where the page content comes from popup.html


Pageaction is similar to browseraction, but the difference is that pageaction is a plug-in that can be triggered only when certain conditions are met. If it is not triggered, it will always remain gray.

Getting started with chrome ext security from 0 (1) -- understanding a chrome ext

Contextmenus right click menu

By calling in Chrome chrome.contextMenus With this API, we can define the right-click menu in the browser.

Of course, to control the API, you must first apply for permission to control contextmenus.

{"permissions": ["contextMenus"]}

In general, this API is defined in the background, which is always loaded in the background.

    Title: "test context menu",
    Onclick: function() {alert ('You click the right-click menu! ');}

Override – override page

Chrome provides override to cover some specific pages of chrome. These include history, new tabs, bookmarks, etc

    "newtab": "newtab.html",
    "history": "history.html",
    "bookmarks": "bookmarks.html"

Toby for chrome, for example, is a plug-in that covers new tabs

Devtools – Developer Tools
Chrome allows plug-ins to refactor developer tools and operate accordingly.
Getting started with chrome ext security from 0 (1) -- understanding a chrome ext

The life cycle of devtools in the plug-in is consistent with the window opened by F12. When F12 is closed, the plug-in will automatically end.

In the devtools page, plug-ins have access to a special set of APIs, which can only be accessed in the devtools page.

chrome.devtools.panels : panel related;
chrome.devtools.inspectedWindow : to obtain the information of the censored window; : get information about network requests;
    //Can only point to one HTML file, not JS file
    "devtools_page": "devtools.html"

Getting started with chrome ext security from 0 (1) -- understanding a chrome ext…

Option – Options

Option represents the settings page of the plug-in. After selecting the icon, right-click the option to enter this page.

Getting started with chrome ext security from 0 (1) -- understanding a chrome ext

        "page": "options.html",
        "chrome_style": true

Omnibox – Search Suggestions

In chrome, if you enter a non URL in the address bar, the content will be automatically sent to Google search.

Omnibox is a magic change for this function. We can trigger the plug-in by setting keywords, and then we can complete the search with the help of the plug-in.

    //Register a keyword to the address bar to provide search suggestions. Only one keyword can be set
    "omnibox": { "keyword" : "go" },

This function is implemented throughchrome.omniboxThis API is used to define.

Notifications – reminders

Notifications represents the prompt box in the lower right corner

chrome.notifications.create(null, {
    type: 'basic',
    iconUrl: 'img/header.jpg',
    title: 'test',
    message: 'i found you!'

Getting started with chrome ext security from 0 (1) -- understanding a chrome ext

Authority system and API

After understanding the forms of various types of plug-ins, there is also a more important is the chrome plug-in related permission system and API.

With the development of chrome in this era, the division of its related authority system has been very detailed. You can refer to the document for specific details.…

Leaving aside the various forms of chrome plug-ins, the functions of plug-ins are mainly concentrated in the code of JS, and the part of JS can be divided into five kinds of injected script, content script, pop JS, background JS and devtools JS

  • The injected script is a JS that is directly inserted into the page. It is consistent with the ordinary JS and cannot access any extension API
  • Content script can only access a few limited APIs such as extension and runtime, and can also access dom
  • Pop JS can access most APIs except devtools, which supports cross domain access
  • Background JS can access most APIs, except devtools, which supports cross domain access
  • Devtools JS can only access some APIs such as devtools, extension and runtime, and can access dom
JS Can DOM be accessed Is JS accessible Is it possible to cross domain
injected script Can be accessed Can be accessed may not
content script Can be accessed may not may not
popup js No direct access may not sure
background js No direct access may not sure
devtools js Can be accessed Can be accessed may not

Similarly, for these kinds of JS, we also need special debugging methods

  • Injected script: you can debug it directly by F12
  • Content script: select the corresponding domain in F12 console

    Getting started with chrome ext security from 0 (1) -- understanding a chrome ext

  • Pop JS: there are review pop-up contents in the right-click list of plug-ins
  • Background js: needs to click the background page on the plugin management page and debug it.

communication mode

After introducing various types of JS, we mentioned an important problem that most JS do not have permission to access JS, including the key content script

So how does the plug-in communicate with the browser foreground and between them?

injected-script content-script popup-js background-js
injected-script window.postMessage
content-script window.postMessage chrome.runtime.sendMessage chrome.runtime.connect chrome.runtime.sendMessage chrome.runtime.connect
popup-js chrome.tabs.sendMessage chrome.tabs.connect chrome.extension. getBackgroundPage()
background-js chrome.tabs.sendMessage chrome.tabs.connect chrome.extension.getViews
devtools-js hrome.devtools.inspectedWindow.eval chrome.runtime.sendMessage chrome.runtime.sendMessage

Pop and background

The pop and background fields can directly call JS and access the dom of the page.

Pop up can be used directlychrome.extension.getBackgroundPage()Get the object of background page, and background can be used directlychrome.extension.getViews({type:'popup'})Get the object of the pop page.

// background.js
function test()

// popup.js
var bg = chrome.extension.getBackgroundPage();
bg.test (); // function to access BG
alert( bg.document.body . innerHTML); // access the dom of BG

Popbackground and content JS

The way of communication between popbackground and content JS mainly depends onchrome.tabs.sendMessageandchrome.runtime.onMessage.addListenerThis kind of communication about event monitoring.

Sender usechrome.tabs.sendMessage, used by the receiverchrome.runtime.onMessage.addListenerListen for events.

chrome.runtime.sendMessage ({greeting: 'sender! '}, function(response) {
    console.log ('accept: '+ response');


chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
    console.log(request, sender, sendResponse);
    Sendresponse ('reply: '+ JSON.stringify (request));

Injected script and content script

Since the injected script is equivalent to JS executed in the page, it has no access to chrome objects, so their direct communication mode is mainly through the use ofwindow.postMessageOr through DOM events.

In the injected script:

`window.postMessage({"test": 'test!'}, '*');

In content script:

window.addEventListener("message", function(e)
}, false);`

Pop background dynamic injection JS

Popbackground cannot directly access the page DOM, but it can be accessed through thechrome.tabs.executeScriptTo execute the script, so as to realize the operation of the page dom.

Note that this requires page permissions

 "permissions": [
        "tabs", "http://*/*", "https://*/*"


//Dynamic execution of JS code
chrome.tabs.executeScript(tabId, {code: '"red"'});
//Dynamic execution of JS file
chrome.tabs.executeScript(tabId, {file: 'some-script.js'});

Chrome plug-ins also have special storage locations, including and The differences are as follows:

  • For the global plug-in, the data saved in each location of the plug-in is synchronized.
  • According to the account automatic synchronization, different computers login to the same account will be synchronized.

To access this API, the plug-in needs to declare the storage permission in advance.


This article mainly describes a lot of introductory knowledge about chrome ext plug-ins. Before talking about the security issues of chrome ext, we may need to understand some issues about chrome ext development.

In the next article, we will focus on the security issues of chrome ext in multiple dimensions. In the modern browser system, what kind of security problems may chrome ext bring.


This article is published by seebug paper. Please indicate the source if you want to reprint it.