background

The front end often has some need for screenshots/snapshots. However, JS does not have an API to support screenshots, so the principle of online snapshot implementation is nothing more than a routine to do:

  1. Read the DOM node in the document
  2. Draw the DOM element onto the canvas
  3. Convert canvas to IMG

A more mature plug-in is HTML2Canvas, which can achieve the screenshot requirements of many scenes, but there are still several disadvantages:

  1. Because the security policy (browser same-origin policy) cannot intercept the contents of the iframe, it may be black/white (iframe container size).
  2. Cross-domain images cannot be captured either, because the browser’s security policy does not allow unauthorized access to remote site information that could compromise user privacy
  3. Because the final drawing is on the canvas, the screenshot is not clear

This works well for most iframe – free nesting scenarios, but it doesn’t work for pages that use iframes. At this time many should think how to use the browser itself to help us achieve screenshots function

The screenshot function of the browser

In fact, Google Chrome has its own screenshots, and is relatively easy to use:

  1. Enter debug mode f12/Command +Option +I

  2. Open the Command window CTRL +Shift +P /Command+ shift+ P

  3. Enter capture and there are three options

    1. Capture Area Screenshots from any area (Optional area)
    2. Screenshot Capture full size screenshot
    3. Capture node screenshot Node mode
    4. Screenshot Capture screenshot of the current range

    Click with the mouse or select the keyboard to use the corresponding function

But the operation cost is a little big, for the uninitiated, need through certain training can use, it will increase the cost of training, the second, this screenshot cannot be coupled to the project, would increase the cost of operation, the result may be it is better to use qq screenshots to provide quick WeChat functions, for example, to force the amway appears very muggles

Develop a screenshot plug-in that is coupled to the project

There are other great screenshots in the Google Store, but the actual effect can be similar to using your own screenshots, and it still doesn’t interact with your project. Therefore, we need to provide users with a function with lower operation cost. At this point, we can think, why can’t we call the built-in screenshot function in our project? The idea is beautiful, but the reality is cruel, because the running environment of Google JS engine and Google plug-in are isolated from each other, so we cannot call the corresponding API through JS, so we need to develop a plug-in to achieve such a function. Developing your own has several advantages and disadvantages:

  1. Additional plug-in installation, user learning costs, and technical support costs (an obvious downside)
  2. The learning cost of technology
  3. It has strong expansibility and can expand other functions on this basis, which is a sustainable development path
  4. It is maintainable because the plug-in is a standalone project

On balance, you can do it yourself.

Basic information to know

Google Chrome plugin development document (otherwise often not open)

Because it is an external network, it may be impossible to access it. Students who cannot access it can also use the plug-in development guide address of 360 browser, because they use the same kernel, so most of the API is the same

Create manifest.json, which is the metadata of the plug-in, the configuration information of the plug-in. Any plug-in must have this file. Any plug-in must have this file

{"manifest_version": 2, "name": "plug-in name", "version": "1.0", // Determine whether the "description":" plug-in description", "browser_action": {"static/favicon.ico", // plugin icon" default_title": "what is displayed on plugin icon", "default_popup": "Pages /popup.html"}, "background": {// scripts": ["scripts/background.js"], "persistent": false }, "permissions": "Tabs ", "unlimitedStorage", "notifications", "history", "activeTab", "storage", "webRequestBlocking", "*://*/*", "http://*/*", "https://*/*" ], "web_accessible_resources": [// Inject the content to the page "scripts/inject.js"], "content_scripts": [{// content js" matches": [" http:// * / * ", "https:// * / *", "* : / / * / *"], / / match those websites "js" : [" scripts/jquery. Min. Js ", "scripts/inject. Js]", "run_at" : "document_start" }] }Copy the code

The project structure

├─ Scripts Scripts │ ├─ Background.js │ ├─ index.js │ ├─ inject.js │ ├─ popup.js ├─ pages ├─ Static Resource ├─ Styles ├─ Manifest.json Chrome Add-ons To Configure ├─ READMECopy the code

Code sample

Popup.html click the icon to display the content and set it in browser_action.default_popup

<body>
  <ul>
    <li class="CaptureScreen">Web page screenshots</li>
  </ul>
</body>
<script src=".. /scripts/index.js"></script>
Copy the code

Scripts/index. Js entry page

const $CaptureScreenBtn = $('.CaptureScreen') // Screenshot button
const popup = {
  / / initialization
  _init () {
    this._initialEvent()
    this._initScript()
  },
  // Event initialization
  _initialEvent () {
    $CaptureScreenBtn.click(this.handleCaptureScreen)
  },
  // Script initialization
  _initScript () {
    this._sendMsg({ action: 'INJECT_SCRIPT'})},// Send messages to communicate with HTML
  _sendMsg (message, callback) {
    // Send a message to runtime
    chrome.runtime.sendMessage(JSON.stringify(message), function(response) {
      if (callback) callback(response)
    })
  },
  // Receive the message
  _getMsg () {
    // Listen for information in runtime
    chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
      switch (request.action) {
        default:
          break}})},// Start taking screenshots
  handleCaptureScreen () {
    The callback function contains details about the current window, such as the window ID, etc
    chrome.windows.getCurrent(function (win) {
      // Grab the contents of the current TAB
      chrome.tabs.captureVisibleTab(win.id, {}, function (dataUrl) {
        const info = {
          action: 'CAPTURE_SCREEN'.payload: dataUrl
        }
        popup._sendMsg(info)
      })
    })
  }
}
Copy the code

scripts/background.js

  • Background process that listens for messages and forwards messages
  • You can manipulate HTML
// Message cluster
chrome.runtime.onMessage.addListener(onRuntimeMessage)

function sendPostMsg (info) {
  window.postMessage(JSON.stringify(info), The '*')}// Listen for runtime messages
/** * @param {*} request * @param {*} sender * @param {*} sendResponse */
function onRuntimeMessage (request, _, sendResponse) {
  // Tips: sendResponse is required, otherwise other messages may be blocked
  const { action, payload } = JSON.parse(request)
  sendResponse()
}

// Inject javascript code into the web page
function injectScript () {
  const link = 'scripts/inject.js'
  const temp = document.createElement('script')
  temp.setAttribute('type'.'text/javascript')
  / / get the address of the similar: chrome - the extension: / / ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject. Js
  temp.src = chrome.extension.getURL(link)
  temp.onload = function() {
    // It will not look good on the page
    this.parentNode.removeChild(this)}document.head.appendChild(temp)
}
Copy the code

Scripts /inject.js This code will be injected into the web page, so it serves as a bridge between the plug-in and the web page, interacting via PostMessage

// Listen for messages
window.addEventListener('message', receivedMessage, false)

// Send a postMessage message
function sendPostMsg (info) {
  window.postMessage(JSON.stringify(info), The '*')}Copy the code

debugging

Whether it’s coding or writing logic, we expect to be able to perform the corresponding operations according to the actual performance, so debugging is involved. Chrome supports javascript debugging directly, and with Chrome, you have a powerful javascript debugger.

Debug the Content Script

Open the developer tool, go to Sources, find the corresponding file -> scripts/index.js, click Open, and debug js as usual

Debugging Background

Because background and Content Script are not in the same runtime environment, the above method does not see background javascript. To debug Background, you also need to open the plugin page, namely “Chrome :// Extensions”. Click “generated background page.html” of the corresponding plug-in, and the debugging window appears. The following operations are similar to those above.

Debug the Popup

Although Popup and Background are in the same runtime environment, the code for Popup is not visible in the Background debug window. So you need to audit what pops up, and then you’re back to debugging

Debugging inject

Inject code into web pages in a similar way to Conten

conclusion

Because I didn’t have relevant development experience before, I was a little flustered at the beginning. In fact, I found that it was not difficult to get started as long as I relaxed my mind and read the development documents carefully. Through this practice, I almost already know how to develop a Chrome plug-in, of course, Chrom plug-in function is very powerful, this use is only the tip of the iceberg, to go deeper, but also need to read more fully the documentation and practice.