The cause of

Yesterday I saw a tutorial about browser plugins in Nuggets. After reading it, I thought it was quite simple, so I was wondering what kind of requirements can be made into plugins.

I wrote a small tool for publishing headline articles in Python, and decided to rewrite this tool as a browser plug-in because it required Python to open a browser, set cookies, and other time-consuming operations every time I published an article.

The plug-in effect is as follows:

Plugin source: github.com/AD-feiben/p…

Essentials of a browser plug-in

Write a browser plugin consisting of manifest.json, popup. HTML, content.js, and background.js.

Specific tutorial everybody can refer to other article on the network, tell about here probably.

  • manifest.jsonFor the configuration manifest file, you can set the plug-in name, plug-in version, and each page.
{
  // The version of the manifest file, this must be written and must be 2
  "manifest_version": 2.// Plug-in name
  "name": "Funny headline GIF.".// Plug-in version number
  "version": "1.0.0".// Plug-in description
  "description": "API takes funny GIFs and posts headlines.".// Plugin icon, displayed on the browser extension management page
  "icons": {
    "16": "static/img/icon.png"."48": "static/img/icon.png"."128": "static/img/icon.png"
  },

  // Run the page in the background
  "background": {
    // If you specify JS, a background page will be generated automatically
    // "page": "template/background.html"
    "scripts": ["static/js/background.js"]},// Specify the popup page
  "browser_action": {
    "default_icon": "static/img/icon.png"."default_title": "Funny headline GIF."."default_popup": "template/popup.html"
  },

  "content_scripts": [{
    // Match all urls
    "matches": ["<all_urls>"].// Inject the following scripts in order on the page
    "js": ["static/js/content.js"].// The style to inject on the page
    "css": ["static/css/content.css"].Document_start, document_end, or document_IDLE (default document_IDLE when the page is idle
    "run_at": "document_idle"}}]Copy the code

  • Popup. HTML is a popover for plugins, but you can also execute JS scripts.

  • Content.js will inject the script into each page.

  • Background.js is the script that the plug-in runs in the background.

Plug-in communication

  • popup 与 backgroundCommunication.popup 和 backgroundIn the same context, it can be called directly.
// background.js
var views = chrome.extension.getViews({type:'popup'}); // Return the popup object
if(views.length > 0) {
    console.log(views[0].location.href);
}
function test(){
	console.log('I am background')；
}

// popup.js
var bg = chrome.extension.getBackgroundPage();
bg.test(); // Access the background function
console.log(bg.document.body.innerHTML); // Access the BACKGROUND DOM
Copy the code
  • contentCommunicating with plug-ins

Popup and background send and receive messages

/ / message
function sendMsgToContentScript(message, callback){
  chrome.tabs.query({active: true.currentWindow: true}, function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, message, function(response){
      if(callback) callback(response); })})}/ / message
chrome.runtime.onMessage.addListener(function(request, sender, sendResonse){
  if(request.type === 'contentMsg') {console.log('Received message from content:' + request.value);
  }
  sendResonse('I'm backstage and I got your message. ');
})
Copy the code

Content Sending and receiving messages

/ / message
chrome.runtime.sendMessage({type: 'contentMsg'.value: 'Hello, I'm Content'},function(response){
  console.log('Received a reply from the background:'+ response)；
})

/ / message
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
  if(request.type === 'popMsg') {console.log('Received message from Popup:' + request.value);
  }
  sendResponse('This is Content, I got your message');
})
Copy the code
  • popupYou can communicate with other scripts only when the plug-in popover is open.

Demand analysis

1. First fill in the popup parameters. Click the Publish article button to get the article data and open the page for editing the headline article.

Because clicking the button opens a new page, popup closes automatically, preventing data from passing from Popup to Content. We worked all night to solve the problem.

When I click Publish, I pass the parameters to background and start fetching data, and then open a new page. After the page is opened, communicate with background to obtain the data just obtained.

To distinguish a page opened from a plugin click from a page opened elsewhere by the user, set a flag when popup passes a parameter to background to indicate that the page is opened from the plugin, and clear the flag when Content retrieves data.

After obtaining the data, parse it and fill the content into the editor.

conclusion

Plug-in development requires distinguishing the context of the plug-in from that of the page.

It should also be noted that popup can communicate only when the popover is opened, and it can communicate through background if necessary.

This article is not a tutorial, but more of an idea. For tutorials, check out the reference article.

I hope this article can help you.

reference

Write a chrome plugin to capture pictures from scratch

If you like my article, I hope you can follow my official account.