干货Chrome插件(扩展)开发全攻略2.6w字，看这篇就够了！

Posted 2022-01-27 搬运工来架构

一、写在前面

我花了将近一个多月的时间断断续续写下这篇博文，并精心写下完整demo，写博客的辛苦大家懂的。本文所有涉及到的大部分代码均在这个demo里面：https://github.com/sxei/chrome-plugin-demo ，大家可以直接下载下来运行。

另外，本文图片较多，且图片服务器带宽有限，右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发，所以请耐心等待加载完毕。

本文目录：

demo部分截图：

二、前言

2.1. 什么是Chrome插件

严格来讲，我们正在说的东西应该叫Chrome扩展(Chrome Extension)，真正意义上的Chrome插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯，本文也全部采用这种叫法，但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。

Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由html、CSS、JS、图片等资源组成的一个.crx后缀的压缩包.

个人猜测crx可能是Chrome Extension如下3个字母的简写：

另外，其实不只是前端技术，Chrome插件还可以配合C++编写的dll动态链接库实现一些更底层的功能(NPAPI)，比如全屏幕截图。 , , , "default_icon": "img/icon.png", "default_title": "我是pageAction", "default_popup": "popup.html" ,*/ [ , ], [ ], , , : , 需要直接注入页面的JS [ 表示匹配所有地址 多个JS按顺序注入 JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式 代码注入的时间，可选值： ], , , jsPath = jsPath || temp = temp.setAttribute( temp.src = chrome.extension.getURL(jsPath); temp.onload = ; chrome-extension://efbllncjkjiijkppagepehoekjojdclc/js/inject.js. Resources must be listed the web_accessible_resources manifest be loaded pages outside the extension.

                 ,  chrome.declarativeContent.onPageChanged.removeRules(   chrome.declarativeContent.onPageChanged.addRules([                              chrome.declarativeContent.PageStateMatcher(       ],       chrome.declarativeContent.ShowPageAction()]        ]); );    contexts: [ onclick:       chrome.tabs.create(+    title:  contexts: [ onclick:  parentId: 1, // 右键菜单项的父菜单项ID。指定父菜单项将会使此菜单项成为父菜单项的子菜单 documentUrlPatterns: // 只在某些页面显示此右键菜单         sidebar.setExpression(    chrome.devtools.inspectedWindow.eval(   html =    (isException) html =    html =    alert(html); ); chrome.devtools.inspectedWindow.eval(   chrome.devtools.panels.openResource(result,         ); ); chrome.devtools.inspectedWindow.eval( chrome.devtools.inspectedWindow.getResources(   alert( );                  ,  : , + text);     suggest([     + text,      + text,      + text,      + text,    ]);     suggest([     + text, + text,     + text, + text,     + text, + text,   ]);     suggest([     + text, + text,     + text, + text,   ]);    + text);  href =    + text; + text.replace( + text.replace( href = + text; openUrlCurrentTab(href); chrome.tabs.query(    ); getCurrentTabId(=>    chrome.tabs.update(tabId,  )  iconUrl:  title:  message:  alert(bg = chrome.extension.getBackgroundPage();views = chrome.extension.getViews(  chrome.tabs.query(   chrome.tabs.sendMessage(tabs[        ); );    sendResponse( + response);   sendResponse(+  customEvent =  hiddenDiv =  hiddenDiv.innerText = data hiddenDiv.dispatchEvent(customEvent);hiddenDiv =  hiddenDiv =  hiddenDiv.style.display =   eventData =  + eventData); port = chrome.tabs.connect(tabId,  port.postMessage( port.onMessage.addListener(   alert(           port.postMessage(    );     port.onMessage.addListener(             );   ...     ], ...  ...     ], ... + currentWindow.id); chrome.tabs.query(    ); chrome.windows.getCurrent(   chrome.tabs.query(        ); );     [                ],showImage; showImage = items.showImage;=>         chrome.notifications.create(                    + details.url,   );        value=onclick=inline because it violates the directive: keyword, a (a nonce (inline execution.