All aspects of step-by-step from 0 to 1 take you develop chrome browser plugins | Denver annual essay

From 0 to 1 to develop chrome browser plugins

A, create,`myPlugin`Folders and`manifest.json`file

1, in`manifest.json`The file writes this code

. If you are to manifest the inside of the json fields describe not clear, suggest to finish see this article, first difficulty, in reading the manifest. The most complete parsing json fields articles online Google browser plug-in manifest. The json file field analytical | Denver annual essay

{
    "name": "my Plugin"."description": "this is my plugin"."version": "0.0.1"."manifest_version": 2
}
Copy the code

2. Open the Admin extension in Chrome

1. Open as shown

2. Alternatively, enter a value in the browser`chrome://extensions`Open the extension

3. Load the unzipped extension

Then go to your myPlugin folder and click ok

You will see your plugin in the extension

You can see name, description, and version in your manifest.json in the plugin information here

Click the icon in the upper right corner of the plugin to display below

If your plugin icon is not displayed, you can do the following and attach it to the upper right corner

4. Now that a simple plug-in is complete, all that’s left is to add things to it

Second, add the pop-up page of click plug-in

The Google Translate plugin, for example, brings up a pop-up page when clicked

1. Add your own plugin before adding anything`icon`Add a

To create aiconsfolder
Find three pictures with dimensions 16 * 16, 48 * 48 and 128 * 128
Added to themanifest.jsonIn the file

"icons": {
    "16": "icons/icon16.png"."48": "icons/icon48.png"."128": "icons/icon128.png"
}
Copy the code

Refresh our plugin in the extension (the image I selected here is the Chrome icon found online)

At this time, the icon in the upper right corner of the browser is also changed to our picture, but it is gray now

2, add`browser_action`

inmyPluginCreate in folderindex.htmlFile, as follows

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>my plugin</title>
</head>
<body>
    this is my plugin 
    browser_action html
</body>
</html>
Copy the code

inmanifest.jsonaddbrowser_actionfield

"browser_action": {
    "default_title": "plugin title"."default_icon": "icons/icon128.png"."default_popup": "index.html"
}
Copy the code

Refresh plug-in in extension program
Click on the top right plug-inicon

3. A plug-in pops up at this point

3. Pop-up page modification modeled after Google Translate plug-in

This is equivalent to web page development, need to introduce CSS, JS

myPluginCreate a foldercssThe folder andjsWen Jian J folder
cssCreated in theindex.cssAnd, inindex.htmlThe introduction of
jsCreated in theindex.jsAnd, inindex.htmlThe introduction of

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>my plugin</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="plugin_search">
        <div class="plugin_search_bar">
            <input id="plugin_search_inp" />
            <input id="plugin_search_but" type="button" value="Translation" />
        </div>
        <div class="plugin_span">
            <span>Translate this page</span>
        </div>
    </div>
    
    <div class="plugin_footer">
        <span>Google - © 2015</span>
        <a target="_blank" href="https://google.com/">Extender options</a>
        <a target="_blank" href="https://translate.google.com/?source=gtx">Google translate</a>
    </div>
</body>
<script src="js/index.js"></script>
</html>
Copy the code

* {padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
}
.plugin_search{
    margin: 15px 30px 15px 30px;
}
.plugin_search_bar{
    margin: 8px 0 16px 0;
}
#plugin_search_inp{
    font-size: 14px;
    margin: 2px;
    height: 23px;
    width: 70%;
}
#plugin_search_but{
    box-shadow: none;
    background-color: #4d90fe;
    background-image: -webkit-linear-gradient(top,#4d90fe.#4787ed);
    border: 1px solid #3079ed;
    color: #fff;
    border-radius: 2px;
    cursor: default;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    margin-right: 16px;
    height: 27px;
    line-height: 27px;
    width: 54px;
    outline: 0px;
    padding: 0 8px;
    box-sizing: content-box;
}
.plugin_span{
    color: #4285f4;
}
.plugin_footer{
    background-color: #f0f0f0;
    color: # 636363;
    font-family: 'Roboto',sans-serif;
    font-size: 11px;
    margin-top: 9px;
    padding: 10px;
    text-align: center;
    width: 400px;
}
.plugin_footer a{
    color: #4285f4;
}
Copy the code

const plugin_search_but = document.getElementById('plugin_search_but')
const plugin_search_inp = document.getElementById('plugin_search_inp')
plugin_search_but.onclick = function () {
    alert('plugin_search_inp的值为：' + plugin_search_inp.value.trim())
}
Copy the code

Refresh in the extension program
Click on the top right plug-inicon
Enter the copy in the input box and click the button

If you want to have other operations and styles, directly injsandcssWrite to the file

Fourth, the background

If I add the following js to index.js

setInterval(() = > {
    alert('alert')},5000);
Copy the code

Alert every five seconds

When I refreshed the plug-in and clicked icon, it would pop up once every five seconds. However, when I cancelled the == popup box, I found that it would not pop up again. Only when I opened it again, it would be executed once every five seconds.

This can satisfy some of the plug-in requirements, as long as I click on the plug-in, I will perform some of the plug-in actions, not click, but some requirements, do not click on the plug-in also perform some of my plug-in actions

This is where background is needed

inmyPluginIn building abackground.jsThe file
inbackground.jsAdd the following code to the file

setInterval(() = > {
    alert('background')},5000);
Copy the code

Then, inmanifest.jsonIn thebackground.jsJoin in

"background": {
    "scripts": ["background.js"]}Copy the code

If you need to be inbackgroundAdd multiplejs, just need to be inscriptsThe order in which the array is added affects the load order ==

You will notice that a pop-up box will pop up every five seconds without clicking the icon

At this point, your plug-in can click the plug-in icon for your plug-in requirements, and do not click to run your plug-in requirements (background run your plug-in requirements).

Content_scripts can manipulate the current page.`dom`,`document`,`window`,`location`…).

I don’t know if you noticed, but if you’re in index.js/background.js console.log(document)/window doesn’t have anything to do with the page you’re currently opening… One is your plugin page and one is your background page

At this point, the product is standing next to you, and I want to use the plugin to manipulate the dom requirements of the current page. Then index.js and background.js are not available.

This is where content_scripts is needed

Comment background.js alert and refresh the plugin.

inmyPluginCreate a new foldercontentJsfolder
incontentJsCreate a new one inindex.jsFile. Look for one on the Internetjquery.jsFile, you need to use (Jquery)
inmanifest.jsonFile thecontent_scriptsIntroduced in

"content_scripts": [{"matches": ["https://*.taobao.com/*"]."js": ["contentJs/jquery.js"."contentJs/index.js"]."run_at": "document_idle"}]Copy the code

Matches: which pages to include these injs
Js: To be introducedjs, loaded in array order
Run_at:jsThe elapsed time of introduction

In the code above, WHAT I want to inject is the page under the taobao domain name https://*.taobao.com/*

inindex.jsEnter the following code

console.log("this is index.js")
console.log(document)
console.log(location)
Copy the code

Refresh the plug-in and open ithttps://www.taobao.com/, open the console

The contents of console.log in your code now appear in the console, and you can manipulate the current page

Add mine to the current page`html`code

At this point the product sees that you can manipulate the current page, and the requirements come again.

Add a dialog box to the current page, which can be operated as XXXXXXX. I also want to add a button XXXX…. to each row of the table on the current page Etc.

Content_scripts allows you to manipulate the page normally, adding a popup, which is HTML and CSS

inmyPluginCreated in thecontentCssFolder, created insideindex.cssfile
inmanifest.jsonThe introduction of

"content_scripts": [{"matches": ["https://*.taobao.com/*"]."css": ["contentCss/index.css"]."js": ["contentJs/jquery.js"."contentJs/index.js"]."run_at": "document_idle"}]Copy the code

Introduce the CSS

The index. The CSS content

#cj_move_page{
    width: 400px; 
    user-select: none; 
    background: white; 
    border: 1px solid; 
    height: 400px; 
    position: fixed; 
    right: 0; 
    bottom: 0; 
    z-index: 1000001;
}
#cj_move_h3{
    text-align: center; 
    line-height: 40px; 
    cursor: move;
}
Copy the code

ContentJs /index.js file contents

console.log("this is index.js")
console.log(document)
console.log(location)

// Create a page function
function createPage () {
    const page = $('<div id="cj_move_page"></div>')
    const h3 = $('<h3 id="cj_move_h3">my Plugin</h3>')
    page.append(h3)
    $('body').append(page)
    / / drag
    drag(cj_move_h3)
}
createPage()

/ / drag
function drag(ele) {
    let oldX, oldY, newX, newY
    ele.onmousedown = function (e) {
        if(! cj_move_page.style.right && ! cj_move_page.style.bottom) { cj_move_page.style.right =0
            cj_move_page.style.bottom = 0
        }
        oldX = e.clientX
        oldY = e.clientY
        document.onmousemove = function (e) {
            newX = e.clientX
            newY = e.clientY
            cj_move_page.style.right = parseInt(cj_move_page.style.right) - newX + oldX + 'px'
            cj_move_page.style.bottom = parseInt(cj_move_page.style.bottom) - newY + oldY + 'px'
            oldX = newX
            oldY = newY
        }
        document.onmouseup = function () {
            document.onmousemove = null
            document.onmouseup = null}}}Copy the code

Create a page in JS and load it into the body of the page

Refresh the plug-in
Refresh Taobao page

Now you can insert the DOM element you wrote into the matches page in content_scripts

Ajax requests

Pages, of course, need Ajax requests

1.`content_scripts`In the`ajax`request

Since we introduced jquery earlier in content_scripts, we can use $.ajax directly

First of all, we’re going tomanifest.jsonAdd a domain name: douban (www.douban.com)

"content_scripts": [{"matches": ["https://*.taobao.com/*"."https://*.douban.com/*"]."css": ["contentCss/index.css"]."js": ["contentJs/jquery.js"."contentJs/index.js"]."run_at": "document_idle"}]Copy the code

In ourcontentJs/index.jsAdd abutton

function createPage() {
    const page = $('<div id="cj_move_page"></div>')
    const h3 = $('<h3 id="cj_move_h3">my Plugin</h3>')
    const but1 = $(')
    page.append(h3)
    page.append(but1)
    $('body').append(page)
    $('#cj_but1').click(function (e) {
        $.ajax({
            url: "https://www.douban.com/j/search".type: "GET".data: {
                q: 'movie'.start: 10.cat: 1002,},success: function (res) {
                console.log(res)
            },
            error: function (e) {
                console.log(e.responseText)
            }
        })
    })
    / / drag
    drag(cj_move_h3)
}
Copy the code

Refresh the plug-in and douban page

Click to load more

2,`background`call`ajax`

First of all, the firstjquery.jsThe introduction of

"background": {
    "scripts": ["contentJs/jquery.js"."background.js"]},Copy the code

Note that the order

Background. Js page

$.ajax({
    url: "https://www.douban.com/j/search".type: "GET".data: {
        q: 'movie'.start: 10.cat: 1002,},success: function (res) {
        console.log(res)
    },
    error: function (e) {
        console.log(e.responseText)
    }
})
Copy the code

Refresh the plug-in
Click the plug-in == background page == button

Click on theconsole.ajaxThe request reads as follows

3. Plug-in pop-up page call`ajax`

Plugin popup page calls Ajax, this need not say again, just like normal page, import jquery, and then call directly in js page

Message communication between JS

Now we have we have content_scripts and background scripts and popup page scripts

Message communication between JS may be required

1.`content_scripts`and`background`Message communication between

Receiving messages:chrome.runtime.onMessage.addListener
Send a message:chrome.runtime.sendMessage

We first incontent_scriptsAdd a button to trigger the event

contentJs/index.js

//contentJs/index.js
const but2 = $('')
// Add a button button
page.append(but2)
$('body').append(page)
// Click the event
$('#cj_but2').click(function (e) {
    // Click the button to send the message
    chrome.runtime.sendMessage({
        info: "I'm Content.js, I'm sending a message."
    }, res= > {
        console.log('I'm Content.js and I got a message:', res)
    })
})
// Receive the message
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    console.log(request, sender, sendResponse)
    sendResponse('I got your message! ');
});
Copy the code

inbackground.jsThe page receives and sends messages

background.js

//background.js
// Receive the message
chrome.runtime.onMessage.addListener(async (req, sender, sendResponse) => {
    console.log('I'm background and I received a message from Content.js:', req.info)
    sendResponse('Hahaha')
    const tabId = await getCurrentTabId()
    // To send a message on the background page, the current tabID is required
    chrome.tabs.sendMessage(tabId, 'I'm background, I'm sending a message'.function (res) {
        console.log('background:, res)
    });
})
/** * Get the current TAB ID */
function getCurrentTabId() {
    return new Promise((resolve, reject) = > {
        chrome.tabs.query({ active: true.currentWindow: true }, function (tabs) {
            resolve(tabs.length ? tabs[0].id : null)}); })}Copy the code

Refresh the plug-in and the page

There’s a button

Click the button to trigger the event
Output information in the console of a page

Output information in the console of the background page

2,`background.js` 和`Displayed in the upper right corner`communication

In the background:chrome.extension.getViews()Gets an array of Windows for each running page in the current plug-in ([window, window])
In the dialog box displayed in the upper right corner:chrome.extension.getBackgroundPage()Get the window object of the background page

background.jsAdd the following code to the

//background.js
/** * communication function */
function backFun () {
    console.log('the arguments:.arguments)
    const allViews = chrome.extension.getViews()
    console.log('chrome. The extension. GetViews () :', allViews)
}
Copy the code

index.jsTo comment out our previous timer, alert affects the flow, and then change the button click event, get the window object of the background page, and call

// index.js
const background = chrome.extension.getBackgroundPage();
console.log(background)
plugin_search_but.onclick = function () {
    // alert('plugin_search_inp '=' + plugin_search_inp.value.trim() ')
    background.backFun('This is argument one'..'This is argument 2'.)}Copy the code

Refresh the plug-in
Click on the top righticon
Right-click to view the element and open the console of the popup page and the console of the background page are not the same
Click on the button

The plug-in console displays below

Console display on background page

Displays a function call console value and an array of Window objects

3,`Pop-up box in the upper right corner`and`content_scripts`Communication between

A dialog box is displayed in the upper right corner:chrome.tabs.connect, the linkcontent_scriptsScript communication
Content_scripts:chrome.runtime.onConnect

In the firstcontent_scriptsaddchrome.runtime.onConnectListening links are used:

contentJs/index.js

// `contentJs/index.js`
chrome.runtime.onConnect.addListener((res) = > {
    console.log('ContentJS chrome.runtime.onConnect:',res)
    if (res.name === 'myConnect') {
        res.onMessage.addListener(mess= > {
            console.log('the res contentjs. OnMessage. AddListener:', mess)
            res.postMessage('Ha ha ha, I'm contentjs')})}})Copy the code

Again inThe index.js dialog box is displayed in the upper right cornerTo establish a link:

index.js

Change our button event to our message trigger event

// index.js
plugin_search_but.onclick = function () {
    // alert('plugin_search_inp '=' + plugin_search_inp.value.trim() ')
    // background.backfun (' this is argument 1', 'this is argument 2')
    mess()
}
async function mess () {
    const tabId = await getCurrentTabId()
    const connect = chrome.tabs.connect(tabId, {name: 'myConnect'});
    console.log(connect)
    connect.postMessage('Here's the popup page. Who are you? ')
    connect.onMessage.addListener((mess) = > {
        console.log(mess)
    })
}

/** * Get the current TAB ID */
function getCurrentTabId() {
    return new Promise((resolve, reject) = > {
        chrome.tabs.query({ active: true.currentWindow: true }, function (tabs) {
            resolve(tabs.length ? tabs[0].id : null)}); })}Copy the code

Refresh the plug-in
Click on the top right corner of the pluginicon
Right-click in the plug-in pop-up to open the console
Click the button to perform the operation

Plug-in popup console displays:

The console on the page shows:

Now, somebody wants to ask, this is a popup in the upper right corner talking to content_scripts, what about content_scripts talking to a popup in the upper right corner?

== The pop-up box only needs to click the plug-in to pop up, and when you operate the page, the plug-in box will disappear again… After disappearing, the.js of the popbox will be destroyed…. So, you can go tobackgroundCommunicate and then click popup after the popup box andbackgroundCommunicate, or pop up after direct tocontent_scriptsCommunication = =

Package plugins

At this point, all of our plug-in requirements are basically complete, all kinds of communication has been implemented, all kinds of requirements are almost ready, it’s time to package

Open your extension
Click the Package extension button

Select your folder
Just hit Pack

The generated file will be prompted after packaging

I’ll hit OK

Ten,

At this point, you’ve developed and packaged a Chrome plugin from zero to one, and you’re perfect.

But there are a lot of things in Google plug-in, this is just a shallow development of a plug-in, involving the API and so on in the following article in the step by step to improve, not silicon step, no even thousands of miles.

reference

Google Chrome plugin official page

Denver annual essay | 2020 technical way with me The campaign is under way…

All aspects of step-by-step from 0 to 1 take you develop chrome browser plugins | Denver annual essay

From 0 to 1 to develop chrome browser plugins

A, create,myPluginFolders andmanifest.jsonfile

1, inmanifest.jsonThe file writes this code

2. Open the Admin extension in Chrome

1. Open as shown

2. Alternatively, enter a value in the browserchrome://extensionsOpen the extension

3. Load the unzipped extension

4. Now that a simple plug-in is complete, all that’s left is to add things to it

Second, add the pop-up page of click plug-in

1. Add your own plugin before adding anythingiconAdd a

2, addbrowser_action

3. A plug-in pops up at this point

3. Pop-up page modification modeled after Google Translate plug-in

Fourth, the background

Content_scripts can manipulate the current page.dom,document,window,location…).

Add mine to the current pagehtmlcode

Ajax requests

1.content_scriptsIn theajaxrequest

2,backgroundcallajax

3. Plug-in pop-up page callajax