chrome插件开发资料

开发框架

https://crxjs.dev/vite-plugin/concepts/content-scripts

开发教程

http://yixi.pro/ChromeExtensionDocument/downloads.html
https://segmentfault.com/a/1190000044557538

https://18055975947.github.io/extension/basic/manifest.html

https://gitee.com/walter_bishop/chrome-plugin-demo#%E6%9D%83%E9%99%90%E5%AF%B9%E6%AF%94

https://developer.chrome.google.cn/docs/extensions/mv2/reference/tabs?hl=en

https://18055975947.github.io/extension/api/scripting.html

举例

https://gitee.com/baibailaoshi/DouKuaiDownload/tree/master/js

常用api

 获取manifest.json文件

 chrome.runtime.getManifest().content_scripts[0].matches

下载视频资源

    chrome.downloads.download({
        url:url,
        filename:sanitizeFilename(title+".mp4"),
        conflictAction:"uniquify"//如果文件名冲突，自动修改文件名以避免冲突

    }, function(downloadId) {
        if(chrome.runtime.lastError) {
            console.error(chrome.runtime.lastError);
        } else {
            console.log("Download started with ID :", downloadId);
        }
    })

action被点击触发的条件 

无论有没有default_title与default_icon不影响下方结果
如果manifest.json中action属性没有default_popup,那么下方的点击才会有效
chrome.action.onClicked.addListener(() => {
  chrome.tabs.create({ url: '/options.html' });
});

chrome.action有效区域

在service-worker.js和popup.html中有效,而在content_scripts内指定的js们无效,会报undefined

另外在service-worker.js中,只有当manifest.json内的default_popup没写,才有效

function reddenPage() {
  alert(12)
}
chrome.action.onClicked.addListener((tab) => {
  console.log('======1212', tab);
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: reddenPage
  });
});

打开options网页方法两则 

chrome.runtime.onInstalled.addListener(async function (details) {
  //details.reason内含属性===>>>chrome_update install update
  if (details.reason === "install") {
    chrome.tabs.create({ url: "options.html" });
chrome.runtime.openOptionsPage();//打开options网页
  }
  
});

用fetch读取json文件

  var jsonFilePath = chrome.runtime.getURL("cfg_domain.json");
  var JSON_DATA = await fetch(jsonFilePath);
  JSON_DATA = await JSON_DATA.json();
  chrome.storage.sync.set({ websites: Object.keys(JSON_DATA) }, function () { });

右键菜单

在网页中点右键,点击菜单后,可在popup的js里看到console的结果

chrome.contextMenus.create({
  "id": "backc",
  title: "测试右键菜单",
});
chrome.contextMenus.onClicked.addListener(function (e) {
  console.log('右键菜单', e)
})

在popup.js中注入自定义js和角标,还可以获取cookie

  document.getElementById("ccc").onclick = () => {
    chrome.tabs.query({ active: true }, (tab) => {
      chrome.scripting.executeScript({
        target: { tabId: tab[0].id },
        function: reddenPage
      });
    });

    chrome.action.setBadgeText({ text: '阿1萨' })
    //(null,{code:"document.body.remove()"});
    chrome.cookies.get(
      {
        url: "https://www.bilibili.com/video/BV1gQ4y1y75Q/?spm_id_from=autoNext",
        name: "buvid_fp",
      },
      function (e) {
        console.log("======e", e);
      }
    );
  };

function reddenPage() {
  alert(12)
}

content_script发消息,service_work能收到,popup收不到

service_work发消息,popup能收到,content_script收不到

popup发消息,service_work能收到,而content_script通过下方代码能收到

//在popup的html上有一个btn按钮,并在popup.js中写入以下代码
document.getElementById('btn').addEventListener('click', () => {
  console.log('======点击了');
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.sendMessage(tabs[0].id, { cmd: "mycmd" }, function (response) { console.log(response); });
  });
})

content_script与pop发送信息给service_work

content_script与popup都可以利用chrome.runtime.sendMessage发送消息
并且只会在service_work里接受到chrome.runtime.onMessage.addListener

service_work.js发送给popup.js,其实send后,有且仅有popup会接收到.

//service_work.js发送
 chrome.runtime.sendMessage({ greeting: "i am service" }, function (response) {
    console.log('servicejs:::::Received $response: ' + JSON.stringify(response));
  });
//popup.js接收
chrome.runtime.onMessage.addListener(
  function (message, sender, sendResponse) {
    console.log('======popup的Message', message);
    console.log('======popup的sender', sender);
    if (message.greeting == "malaka") {
      console.log('======这里是popupjs');
    }
  });

service_work.js操作网页dom举例

//content_script.js
chrome.runtime.sendMessage({ greeting: "i am content" }, function (response) {
  console.log('Content_Script接受信息: ' + JSON.stringify(response));
});

//service_work.js
chrome.runtime.onMessage.addListener(function(){
if(message.greeting == 'i am content'){
      chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        let name = 'Peter';
        let age = 18;
        chrome.scripting.executeScript({
          target: { tabId: tabs[0].id },
          func: processDom,
          //files: ['js/options.js'],
          args: [name, age],
        });
      });
      sendResponse()
    }
})
function processDom(a, b) { document.querySelector('#kw').remove() }

查看权限

chrome.permissions.getAll((pp) => {
  console.log('======pp', pp);
})

获取manifest文件内的所有值

chrome.runtime.getManifest()