1. manifest 插件配置文件

这是一个Chrome插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录

developer.chrome.com/docs/extens…

{
  "name": "谷歌插件",
  "description": "谷歌插件demo",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "./static/js/background.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["./static/css/content.css"],
      "js": ["./static/js/content.js"],
      "run_at": "document_end"
    }
  ],
  "permissions": [
    "storage",
    "activeTab",
    "scripting",
    "tabs",
    "alarms",
    "notifications",
    "webRequest",
    "contextMenus"
  ],
  "icons": {
    "16": "./static/images/get_started16.png",
    "32": "./static/images/get_started32.png",
    "48": "./static/images/get_started48.png",
    "128": "./static/images/get_started128.png"
  },
  "host_permissions": ["*://*/*", "https://*/*", "<all_urls>"],
  "action": {
    "default_icon": {
      "16": "./static/images/get_started16.png",
      "32": "./static/images/get_started32.png",
      "48": "./static/images/get_started48.png",
      "128": "./static/images/get_started128.png"
    },
    "default_title": "popup",
    "default_popup": "popup.html"
  },
  "chrome_url_overrides": {
    "newtab": "index.html"
  },
  "options_page": "options.html",
  "web_accessible_resources": [
    {
      "resources": ["inject.js"],
      "matches": [
        "<all_urls>"
      ]
    }
  ],
  "commands": {
    "run-foo": {
      "suggested_key": {
        "default": "Ctrl+Shift+Y",
        "mac": "Command+Shift+Y"
      },
      "description": "Run \"foo\" on the current page."
    }
  }
}

permissions developer.chrome.com/docs/extens…

overrides developer.chrome.com/docs/extens…

2. popup 独立的弹出页面，有独立的html、css、js

点击谷歌扩展插件出现的popup页面

"action": {
  "default_icon": {
    "16": "./static/images/get_started16.png",
    "32": "./static/images/get_started32.png",
    "48": "./static/images/get_started48.png",
    "128": "./static/images/get_started128.png"
  },
  "default_title": "popup",
  "default_popup": "popup.html"
},

3. background 背景页

没有实际页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。

"background": {
  "service_worker": "./static/js/background.js",
  "type": "module"
},

4. options 选项页

"options_page": "options.html",

5. content-script

Chrome插件中向页面注入脚本的一种形式（虽然名为script，其实还可以包括css的），可以获取目标的demo并且修改。但是 content script的javascript与目标页面相互隔离，也就是说content script和 目标页面的javascript不会互相污染，也不能互相调用。

注意： 只是js作用域的隔离，但是css 不能隔离

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "css": ["./static/css/content.css"],
    "js": ["./static/js/content.js"],
    "run_at": "document_end"
  }
],
"web_accessible_resources": [
  {
    "resources": ["inject.js"],
    "matches": [
      "<all_urls>"
    ]
  }
],

动态执行脚本 developer.chrome.com/docs/extens…

2.功能

1. 快捷键 command

浏览器中输入 chrome://extensions/shortcuts

"commands": {
  "run-foo": {
    "suggested_key": {
      "default": "Ctrl+Shift+Y",
      "mac": "Command+Shift+Y"
    },
    "description": "Run \"foo\" on the current page."
  }
}

// Command 快捷键
chrome.commands.onCommand.addListener((command) => {
  console.log(`Command: ${command}`);
});

2. 右键菜单 contextMenus

function getword(info: any,tab: any) {
  console.log("Word" + info.selectionText +" was clicked.");
  chrome.tabs.create({  
    url:"http://www.google.com/search?q=" + info.selectionText
  });
} 
useEffect(() => {
    // contextMenus 右键菜单
    chrome.contextMenus.create({
      title:"Search: %s",
      contexts:["all"],
      id: '1'
    }, () => {
      console.log('contextMenus create success!');
    })
    return () => {
      chrome.contextMenus.removeAll()
    };
  }, [])
chrome.contextMenus.onClicked.addListener(getword);

3. override page 覆盖特定页面

●历史记录：从工具菜单上点击历史记录时访问的页面，或者从地址栏直接输入 chrome://history

●新标签页：当创建新标签的时候访问的页面，或者从地址栏直接输入 chrome://newtab

●书签：浏览器的书签，或者直接输入 chrome://bookmarks

"chrome_url_overrides": {
  "newtab": "index.html"
},

4. options 选项页

插件的设置页面，有2个入口，一个是右键图标有一个“选项”菜单，还有一个在插件管理页面：

function Options() {
  console.log('chrome',chrome)
  return (
    <div>
    Options Page
    </div>
  );
}
export default Options;
ReactDOM.render(<Options />, document.getElementById('root'))

5. notifications 通知

chrome.notifications.create(
  id,
  {
    title: '你快去写周报!',
    message: '周报',
    iconUrl: '../images/get_started16.png',
    type: 'basic'
  },
  (content) => {
    console.log('content', content);
  },
) 

6.omnibox 搜索建议

是向用户提供搜索建议的一种方式

"omnibox": { "keyword" : "go" }

7. devtools 开发者工具

demo github.com/googlearchi…

自定义开发者工具面板