I wrote a few Chrome extensions, and it worked out pretty well. Just last week when collecting documents to write MD, FEEL page copy to MD format save too wordy, just write a. Write this article in question and answer format by reviewing the requirements and how the plug-in is implemented.

The following Markdown Clipboard plug-ins are simply called MC

  • Github storage address: Markdown Clipboard Github

  • Download the Clipboard extension from Markdown


Q: How to write a Chrome plugin

A: It’s very simple. A basic directory is as follows:

.├ ─ background.js ├─ manifest.jsonCopy the code


Q: Why is it so easy?

A: Yes, this is required for minimal scaling


Q: What is manifest.json

A: A manifest file, A must for chrome extensions


Q: What does the file contain

A: Let’s take A real look at the markdown-Clipboard manifest configuration:

{
    "manifest_version": 2."name": "markdown clipboard"."short_name": "md"."description": "copy content with md url format"."version": "1.2.0"."background": {
        "scripts": ["background.js"]."persistent": false
    },

    "browser_action": {
        "default_title": "markdown clipboard"."default_icon": "markdown.png"
    },

    "icons": {
        "128": "markdown.png"."16": "markdown.png"."48": "markdown.png"
    },

    "commands": {
        "base": {
            "description": "ClipBoard Copy"."suggested_key": {
                "default": "Alt+C"."mac": "Alt+C"}}},"permissions": [
        "activeTab"."tabs"."http://*/*"."https://*/*"]}Copy the code

Just a brief introduction will help you understand.

  • manifest_versionThis is the official recommended version of chrome-Extension and does not need to be changed
  • name.short_name.version.descriptionPublish the basic information of the plug-in: name, abbreviation, version, description
  • background: Specifies the background file
  • browser_actionAfter the plugin is installed, your navigation bar displays the plugin icon and other information
  • icons: Installs the extension, the extension list displays the icon
  • commands: If you need a shortcut key, you can set it here. For example, the current plug-in default isAlt + Cshortcuts
  • permissions: The scope of your plugin permission needs to be set here, such as inhttp.httpsAnd current activationactiveTabTake effect, write, specific what can refer to the official document


Q: What is background used for

A: That’s the background. Your extension implements functionality that is the biggest backend. Full participation, you can think of this as the entry file for the extension. A background can be an HTML page containing a script and style, or it can be a script file. In this case, we’ll just use background-js. But background cannot directly manipulate the DOM of an open TAB page.


Q: Coach, I have heard that content_script can be embedded in a page, directly manipulating the DOM of the browsing page. Why didn’t you say that before?

A: Yes, but not all milk is called Terunsu, and not all extensions need to use it. Content_script is innocuous, it can manipulate the page DOM, and at the same time does not conflict with each page’s own JS, is isolated, so it can do whatever it wants. But…


Q: But what? How could that be wrong? Are you trying to lie to me

A: Well, there’s one problem: because content_script is embedded in the page. So there is a case where you install an extension when the page is already open. By default, the TAB page is not embedded with content_script, which leads users to assume that the plugin doesn’t work, and then to complain that the plugin author is lying and the plugin is garbage. In this case, you actually need to refresh the page to embed content_script.


Q: So I understand why MCS don’t use content_script, for better interaction?

A: Yes, in order to avoid unnecessary page refreshes, the MC uses dynamic insert scripts


Q: That sounds pretty advanced. How does it work

A: Please look at the code:

chrome.commands.onCommand.addListener(function(command) {
    chrome.tabs.executeScript(null, {file: "markdown_insert.js"}, () = > {}); });Copy the code


Q: How can it be so easy?

A: Yes, the technology itself is A simple thing, but we need to combine all kinds of simple things to fit the most suitable scenario according to the requirements


Q: Coach, you said it was so simple. I can understand it by looking at the source code. Please give me some links

A: Markdown Clipboard source code


Q: Give me a few more official documents and I can learn to use them myself

A: HMM, very good. I’d recommend two.

The official documentation

Summary – extension development document: 360 browser Chinese version, don’t worry, no other meaning, is 360, is also Chrome


Q: What else did MC do

A: Ok, take your time. In A word, quickly convert text, links and images to Markdown syntax.

  • Mouse selection to copy content: text, links, images, or even nothing at all
  • Copy content to clipboard using default shortcut keys:Alt + C.
  • Copy the Markdown format where you want to copy it


Q: Why not use Ctrl + C as a regular copy shortcut

A: Because the operation changes the clipboard content, the plug-in cannot and should not affect normal usage, so the shortcut keys are separate


Q: Does the clipboard return different content in different cases

A: see below

  • Do not select anything:[Document title](Page link)
  • Select text:[Text](page link)
  • Select text link:[Text](text link)
  • Select HTTP link:[Default text replaces itself](text link)
  • Select image:! [Image Alt tag name](image link)


Q: What’s different from the others?

A: see below

  • When there is a link in the selected text, the clipboard is returned with[Select text](Select text link)returns
  • When you select a pure HTTP text link, don’t worry if the selection is incomplete, the full URL will be returned.


Q: Not intuitive

A: Up GIF


Q: What JS knowledge points are used to modify the clipboard

A: see below

  • window.getSelection()– Gets the selected content
  • document.execCommand: Manually triggers copy and paste


Q: What else did you write, coach

A: Yeah, yeah

  • SPS Music Plugin features stable version :Chrome music extension
  • Dropzone Resizeup (Image solution for Markdown) : MD Image solution
  • EasyPack – Visual Webpack Build Tool 1.0.3 Update: Electron Desktop Tool
  • Code -rhythm: wrote a vscode extension to make code more enjoyable :vscode extension