Address stamp here github address, welcome star

background

On some web pages, users may not be allowed to copy content and need to log in. Or there are some web pages copy after the copyright information will be added, paste after the deletion, very time-consuming.

As a senior copy and paste engineer how can tolerate, so consider making a Chrome widget to deal with these two problems.

Train of thought

The first question is the idea

Most sites use use-select: None to disable mouse selection, so we just need to inject a use-select: text to make everything selectable.

The second question

General website is by listening to the copy event, and then copy the text behind the text with copyright information, and then write in the clipboard. Here we can add a copy event to the document and write the value of the original mouse copy to the clipboard.

Open dry

The main configuration file of the Chrome plugin is manifest.json. The complete code is as follows:

{
  "name": "Duplicate plug-in".// The corresponding position is shown below
  "version": "1.0".// The corresponding position is shown below
  "description": "Copy code and remove copyright information.".// The corresponding position is shown below
  "manifest_version": 3.// The current version, the latest version is 3, can also use 2, mainly due to some API changes
  "icons": {   // Different size ICONS are displayed in different positions
    "16": "/images/get_started16.png"."32": "/images/get_started32.png"."48": "/images/get_started48.png"."128": "/images/get_started128.png"
  },
  "content_scripts": [  // The injected information
    {
      "matches": ["<all_urls>"].// 
      
        refers to all web pages and can be written to specific pages
      
      "css": ["./custom.css"].// Inject CSS into the page
      "js": ["./custom.js"].// Inject javascript into the page
      "run_at": "document_end"  Document_start, document_end, document_idle}}]Copy the code

Then the CSS and JS file code to solve the problem respectively:

css:

* {
  user-select: text ! important;
}
Copy the code

js:

/** Listen for the copy event */
document.addEventListener(
  "copy".function (e) {
    e.stopPropagation(); // Cancel event passing, at which point the copy event is no longer executed
    e.preventDefault(); // Cancel the default event to modify the replication value
    const copyTxt = window.getSelection(0).toString();  // Copy the content
    if (e.clipboardData) { // Execute the method of writing to the clipboard according to compatibility
      e.clipboardData.setData("text/plain", copyTxt);
    } else if (window.clipboardData) {
      return window.clipboardData.setData("text", copyTxt); }},true // Use the event capture mechanism to execute the outer copy method first, then the inner copy method
);

Copy the code

This is the main logic, see github for the complete code, download it to use, and then click “Load unzipped extension” in the Chrome extension.

Finally, welcome to add my wechat communication technology ~