Learn to write a browser plug-in in 7 minutes-break through the restriction of a certain SDN that is not logged in and prohibits copying

Strictly speaking, this article should discuss "Chrome extensions (Extension)" rather than "Chrome plug-ins (Plugins)". You may wish to think about a question first: between "browser plugins" and "browser extensions" What's the difference? If you are bored with this, you may wish to skip this section.

Misunderstandings about Chrome plug-ins and extensions

A lot of things have happened to the Chrome browser since its birth in 2008. It is currently the web browser with the most complete functions and the most adequate support for new features. The emergence of Chrome has expanded our definition of browser functions in a sense. And it supports applications, plug-ins and extensions made by third-party developers. But what is the difference between these three? If you want to get an ad blocker, is it an app or an extension? Adobe Flash, which was once a smash hit before HTML5, can enrich website content, bring videos/animations/games but has been criticized for security issues, is it a browser extension or a plug-in?

Here, let's first understand the difference between Chrome apps, plugins and extensions (Chrome apps, plugins and extensions) so that you can always know what you need.

Chrome Apps

The concept of Chrome applications may be the most obscure among Chrome applications, plug-ins, and extensions, because Google itself can refer to applications and extensions interchangeably. It’s not difficult to prove this, you can go to the extension page ( https://chrome.google.com/webstore/category/extensions ) in the Chrome Web Store and replace the word "extensions" with "apps" in the address bar, it will actually redirect Back to the extensions page!

The Web Store used to have a dedicated "Apps" section where stand-alone desktop applications were provided. But at the end of 2017, Google removed these traditional Chrome applications, because Google promoted the concept of "Progressive Web Apps (PWA)", which essentially transformed the website from the desktop or mobile phone to instant Accessed applications, so now there are only two parts under the search box, "Extensions" and "Themes".

For ordinary PC users, the Chrome application is now integrated into the extension. If you are looking for an ad blocker, Web Clipper, etc. for Chrome, whether you search for "Chrome app" or "Chrome extension", you will end up with an extension.

Chrome Extensions

Chrome Extensions are add-ons for Chrome, aimed a variety of ways to improve your experience . The improvement of this experience can range from a data protection program to an ad blocker to a dictionary that allows you to double-click a word in Chrome and immediately understand its meaning. You can find extensions in the Chrome Web Store. When you install an extension, it will display a small icon in the upper right corner of the Chrome browser.

Extensions can increase the functionality of the browser itself, and can call the browser’s API , and the extensions of the same browser can generally be across operating systems . For example, the Chrome extensions you use on Windows can also be used on the Mac platform.

Extensions add features and functions to the browser. It is generally created through web technologies—HTML, CSS, and JavaScript. The extension is actually a compressed file. The extension for Firefox is .xpi and the extension for Chrome is .crx .

Chrome Plugins

The plug-in is best described as "plugging into" Chrome’s code package , allowing web developers to embed certain functions, animations, videos, etc. into their website. The plug-in can call the operating system’s API , and different operating systems The plug-ins of, generally cannot be mixed, and the plug-ins are mainly used to implement functions that cannot be implemented independently by the browser.

In other words, the plug-in enables content that can be processed by other programs to be displayed and processed in the browser page. Therefore, plug-ins generally implement relatively low-level functions. Once a problem occurs, the entire operating system is often involved. Flash plug-ins, such as Flash plug-ins, belong to the category that often has high-risk vulnerabilities. Before Chrome 57, you can chrome://plugins in the address bar, including Adobe Flash Player, Chrome PDF Viewer and Java plug-ins. Now chrome://chrome-urls/ is no chrome://plugins found in 0616f705bdd663.

chrome://plugins no longer exists is that for security reasons, Chrome no longer supports NPAPI plug-ins-some plug-ins no longer work, and other plug-ins have been integrated into Chrome in various ways. For example, Java-based applets no longer run in the browser, and functions such as PDF viewers have been directly integrated into the browser. Therefore, a bit like an application (Chrome Apps), Chrome plug-ins are also being phased out or integrated into the main body of the browser.

The format of the plug-in is usually binary file . For example, the plug-in under windows is generally dll , and the plug-in under linux is generally in .so format.

Essentially, "Chrome apps" will be replaced by PWAs, and plugins have basically been deprecated over the years, so the only thing you need to care about in Chrome is extensions.

The true Chrome plug-in is a lower-level browser function extension, but the two concepts of browser plug-in and extension have long been confused. Given that most of the people is called Chrome plug-ins have become accustomed to, we are all using this name, but you should know, Chrome plug-ins described herein actually refers to the Chrome extension .

By the way, a simple supplement, in addition to the three concepts mentioned above, you may have seen concepts such as ActiveX (control), Addon etc. In fact, ActiveX is a plug-in under the IE kernel browser. With the IE browser from Windows 11 has disappeared and will officially withdraw from the stage of history in 2022. We don't need to pay too much attention; Addon belongs to the Mozilla browser, and its Chinese name is Add-on. In fact, it is the same type of application as browser extensions.

Core elements of browser plug-ins

manifest.json

A Chrome extension is actually a configuration (entry) file manifest.json and a collection of html, css, js, and image files. Extensions/plugins start from their manifest.json , so manifest.json is the most important and indispensable file , used to configure all plug-in related configuration, must be placed in the root directory. Generally, at least the following configurations should be included:

// manifest.json
{
  "name": "Getting Started Example", // 扩展的名称（name）
  "version": "1.0", // 插件版本号
  "description": "Build an Extension!", // 插件描述
  "manifest_version": 2, // manifest 版本，目前是必须是2或者3

  // 指定扩展在Chrome 工具栏中的图标，它定义了扩展图标文件位置（default_icon）、
  // 悬浮提示（default_title）和点击扩展图标所显示的页面位置（default_popup）
  "browser_action": {
    "default_title": "Hello, 某SDN!",
    "default_icon": "/images/logo.png", // 浏览器右上角图标设置
    "default_popup": "popup.html"
  }
}

Of course, a manifest.json file can contain many things, you can refer to Manifest file format , and other configurations used later will be explained in the comments.

When VSCode writes the .json file, the red prompt is Comments are not permitted in JSON.（521） . At this time, just click "JSON" in the lower right corner of the VSCode interface, enter "JSON with Comments" in the box displayed at the top, and click to use.

popup.html

This name is not fixed. It depends on the browser_action manifest.json in 0616f705bdd812. It defines the HTML of the popup page displayed by clicking the icon of the plug-in. popup.html can directly import other js files like ordinary html. One thing to note is that if the js introduced here directly manipulates the DOM, it manipulates the DOM generated by popup.html, not the DOM of the browser currently displayed.

content_scripts

This one comes from manifest.json of content_scripts configuration items, declared JS needs is injected directly into the page, JS here can directly manipulate the current page's DOM objects useful when it is required to open this file in the page to operate.

Development and debugging

Chrome plug-in does not have strict project structure requirements. As long as the root directory has a manifest.json, can be used, and no special IDE is required for development.

When developing and debugging, the simplest way to enter the plug-in management page is to enter chrome://extensions/ in the address bar to access. The other two ways to enter the plug-in management page are shown in the figure below:

developer mode upper right corner to load the plug-in directly in the form of a folder, otherwise you can only install files in the .crx By default, Chrome requires that the plug-in must be installed from its Chrome App Store. Downloads from any other website and packaged by itself cannot be installed directly. So, in fact, we can decompress the crx file and load it directly through the developer mode.

During the development process, any changes to the code must reload the plug-in. Click the reload button of the corresponding plug-in or refresh the current plug-in management page. If there is an error, an interface similar to the following will appear. After the change, you need to click the "error" button to enter the pop-up window to clear the error.

For more details encountered during the development process, please refer to the official Debugging extensions document.

Write a browser plug-in in 3 minutes to solve the problem that an SDN cannot copy code without logging in

We know that after a certain SDN update some time ago, the code in the article could not be copied when not logged in, which caused some inconvenience to developers. Today we will spend 3 minutes writing a browser plug-in to break through this limitation.

The basic idea is actually very simple. achieves the reproducible effect document.body.contentEditable value of true current page to 0616f705bdd959. Of course, this can also be easily achieved through the console panel or "custom bookmarks", here is just to let everyone experience the development of simple plug-ins, avoiding the shot is "Hello World!", 😄

A certain SDN set user-select: none; for the code block, which made it impossible to select and copy. You can start from here.

For the realization of the bookmark function, please refer to front-end installation skills 108 formula (1) .

The following will introduce the relevant information of each project file step by step, you can also directly click here view the complete code online. The whole project core code is less than 30 lines . I believe you can quickly get started with Chrome plug-in development, stimulate interest and potential, and write more useful plug-ins or applications.

Directory Structure

Directory structure diagram:

Directory explanation:

• images

  • logo.png: plug-in icon.

• js

  • popup.js: js used in popup.html;
  • content_script.js: js that needs to be injected directly into the page;
• manifest.json: configuration file, a necessary item in plug-in development;
• popup.html: plug-in popup window;
• style.css: pop-up style file;

manifest.json configuration file

{
  // 清单文件的版本，必须是2或者3，
  // 文档见 https://developer.chrome.com/docs/extensions/mv3/manifest/manifest_version/
  "manifest_version": 2,
  // 插件的名称
  "name": "Copy SDN",
  // 插件的版本
  "version": "1.0.0",
  // 插件描述
  "description": "不登录依然可以在某SDN页面进行代码复制！",
  // 指定扩展在Chrome 工具栏中的图标，它定义了扩展图标文件位置（default_icon）、
  // 悬浮提示（default_title）和点击扩展图标所显示的页面位置（default_popup）
  "browser_action": {
    "default_title": "Hello, 某SDN!",
    "default_icon": "/images/logo.png", // 浏览器右上角图标设置
    "default_popup": "popup.html"
  },
  // https://developer.chrome.com/docs/extensions/mv2/manifest/icons/
  // 128x128 的图标；它在安装期间和 Chrome 网上应用店使用
  // 48x48 图标，用于扩展程序管理页面 (chrome://extensions)
  // 16x16 图标用作扩展页面的收藏夹图标
  // 这里只写一个其实也是可以的
  "icons": {
    "128": "/images/logo.png"
  },
  // 需要直接注入页面的JS
  "content_scripts": [
    {
      //"matches": ["http://*/*", "https://*/*"],"<all_urls>" 表示匹配所有地址
      "matches": ["https://blog.csdn.net/*"],
      // 多个JS按顺序注入
      "js": ["/js/content_script.js"],
      // "css": ["css/custom.css"],
      // 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，
      // document_idle表示页面空闲时，为默认值
      "run_at": "document_start"
    }
  ],
  // 定义了扩展需要向 Chrome 申请的权限，比如通过 XMLHttpRequest 跨域请求数据、访问浏览器选项卡（tabs）
  // 获取当前活动选项卡（activeTab）、浏览器通知（notifications）、存储（storage）等，可以根据需要添加。
  "permissions": ["tabs"]
}

Popup.html and css to make plug-in popups

popup.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Copy SDN</title>
  </head>

  <body>
    允许复制Code：<input type="checkbox" class="switch" id="toggle" />
    <!-- 这里引入了popup.js，来给popup弹窗添加一些交互功能 -->
    <script src="./js/popup.js"></script>
  </body>
</html>

style.css up style file 0616f705bddb79:

body {
  width: 160px;
  height: 24px;
  background-color: lavender;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Switch开关样式 */
input[type='checkbox'].switch {
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  width: 40px;
  height: 20px;
  background: #ccc;
  border-radius: 10px;
  transition: border-color 0.3s, background-color 0.3s;
}

input[type='checkbox'].switch::after {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0, 0, 2px, #999;
  transition: 0.4s;
  top: 2px;
  position: absolute;
  left: 2px;
}

input[type='checkbox'].switch:checked {
  background: rgb(19, 206, 102);
}

/* 当input[type=checkbox]被选中时：伪元素显示下面样式 位置发生变化 */
input[type='checkbox'].switch:checked::after {
  content: '';
  position: absolute;
  left: 55%;
  top: 2px;
}

The above code will construct the following plug-in pop-up UI:

popup.js adds interaction to the popup

// 这里的js其实是操作popup.html产生的dom的
document.addEventListener('DOMContentLoaded', function () {
  // 获取开关按钮的初始值。这里{ type: 'get_editable' }是可以随意定义的，可以传递任何你想传递的信息
  sendMessageToContentScript({ type: 'get_editable' }, (response) => {
    toggle.checked = ['true', true].includes(response) ? 'checked' : null;
  });

  // 切换contentEditable状态
  toggle.addEventListener('change', () => {
    sendMessageToContentScript({ type: 'toggle' });
  });
});

// 向content_scripts发送消息的函数
function sendMessageToContentScript(message, callback) {
  // 这里用到了tabs，所以前面配置文件需要配置"permissions": ["tabs"]
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.sendMessage(tabs[0].id, message, (response) => {
      if (callback) callback(response);
    });
  });
}

content_script.js injects JS into the page

// 所谓content-scripts，其实就是Chrome插件中向页面注入脚本的一种形式（虽然名为script，其实还可以包括css），
// 借助content-scripts我们可以实现通过配置的方式轻松向指定页面注入JS和CSS（如果需要动态注入，可以参考下文），
// 最常见的比如：广告屏蔽、页面CSS定制，等等。

// 接收消息
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  // 数据处理和返回。是不是有点类似redux中reducer数据处理的感觉
  switch (request.type) {
    case 'get_editable':
      // 将当前文档是否可编辑的信息返回给popup，控制开关的形态
      sendResponse(document.body.contentEditable);
      break;
    case 'toggle':
      // 切换可编辑状态
      document.body.contentEditable = ![true, 'true'].includes(
        document.body.contentEditable
      );
    default:
      break;
  }
});

Package and release

In the upper left corner of the plug-in management page, there is a "package extension" button, click on it and the following interface will appear, select the folder to be packaged for packaging, and you will get a .crx , which is actually what you often install The compressed package file installed when plug-in.

To publish to the Google App Store, you need to pay a $5 registration fee to become a developer: Register as a Chrome Web Store Developer .

Reference

• How to Build & Publish a Chrome Extension in 13 Minutes?🔥
• Chrome Apps, Plugins, Extensions: What’s the Difference?
• [Dry goods] Chrome plug-in (extension) development guide

This article was first published on personal blog , welcome to and star .