{  // 清单文件的版本，这个必须写，而且必须是2  "manifest_version": 2,  // 插件的名称  "name": "demo",  // 插件的版本  "version": "1.0.0",  // 插件描述  "description": "简单的Chrome扩展demo",  // 图标，一般偷懒全部用一个尺寸的也没问题  "icons":  {    "16": "img/icon.png",    "48": "img/icon.png",    "128": "img/icon.png"  },  // 会一直常驻的后台JS或后台页面  "background":  {    // 2种指定方式，如果指定JS，那么会自动生成一个背景页    "page": "background.html"    //"scripts": ["js/background.js"]  },  // 浏览器右上角图标设置，browser_action、page_action、app必须三选一  "browser_action":   {    "default_icon": "img/icon.png",    // 图标悬停时的标题，可选    "default_title": "这是一个示例Chrome插件",    "default_popup": "popup.html"  },  // 当某些特定页面打开才显示的图标  /*"page_action":  {    "default_icon": "img/icon.png",    "default_title": "我是pageAction",    "default_popup": "popup.html"  },*/  // 需要直接注入页面的JS  "content_scripts":   [    {      //"matches": ["http://*/*", "https://*/*"],      // "" 表示匹配所有地址      "matches": [""],      // 多个JS按顺序注入      "js": ["js/jquery-1.8.3.js", "js/content-script.js"],      // JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式      "css": ["css/custom.css"],      // 代码注入的时间，可选值："document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle      "run_at": "document_start"    },    // 这里仅仅是为了演示content-script可以配置多个规则    {      "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],      "js": ["js/show-image-content-size.js"]    }  ],  // 权限申请  "permissions":  [    "contextMenus", // 右键菜单    "tabs", // 标签    "notifications", // 通知    "webRequest", // web请求    "webRequestBlocking",    "storage", // 插件本地存储    "http://*/*", // 可以通过executeScript或者insertCSS访问的网站    "https://*/*" // 可以通过executeScript或者insertCSS访问的网站  ],  // 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的  "web_accessible_resources": ["js/inject.js"],  // 插件主页，这个很重要，不要浪费了这个免费广告位  "homepage_url": "https://www.baidu.com",  // 覆盖浏览器默认页面  "chrome_url_overrides":  {    // 覆盖浏览器默认的新标签页    "newtab": "newtab.html"  },  // Chrome40以前的插件配置页写法  "options_page": "options.html",  // Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个  "options_ui":  {    "page": "options.html",    // 添加一些默认的样式，推荐使用    "chrome_style": true  },  // 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字  "omnibox": { "keyword" : "go" },  // 默认语言  "default_locale": "zh_CN",  // devtools页面入口，注意只能指向一个HTML文件，不能是JS文件  "devtools_page": "devtools.html"}

{  // 需要直接注入页面的JS  "content_scripts":   [    {      //"matches": ["http://*/*", "https://*/*"],      // "" 表示匹配所有地址      "matches": [""],      // 多个JS按顺序注入      "js": ["js/jquery-1.8.3.js", "js/content-script.js"],      // JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式      "css": ["css/custom.css"],      // 代码注入的时间，可选值："document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle      "run_at": "document_start"    }  ],}

document.addEventListener('DOMContentLoaded', function(){  console.log('我被执行了！');});

{  // 会一直常驻的后台JS或后台页面  "background":  {    // 2种指定方式，如果指定JS，那么会自动生成一个背景页    "page": "background.html"    //"scripts": ["js/background.js"]  },}

{  "background":  {    "scripts": ["event-page.js"],    "persistent": false  },}

{  "browser_action":  {    "default_icon": "img/icon.png",    // 图标悬停时的标题，可选    "default_title": "这是一个示例Chrome插件",    "default_popup": "popup.html"  }}

// 向页面注入JSfunction injectCustomJs(jsPath){  jsPath = jsPath || 'js/inject.js';  var temp = document.createElement('script');  temp.setAttribute('type', 'text/javascript');  // 获得的地址类似：chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js  temp.src = chrome.extension.getURL(jsPath);  temp.onload = function(){    // 放在页面不好看，执行完后移除掉    this.parentNode.removeChild(this);  };  document.head.appendChild(temp);}

Denying load of chrome-extension://efbllncjkjiijkppagepehoekjojdclc/js/inject.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

{  // 普通页面能够直接访问的插件资源列表，如果不设置是无法直接访问的  "web_accessible_resources": ["js/inject.js"],}

"browser_action":{  "default_icon": "img/icon.png",  "default_title": "这是一个示例Chrome插件",  "default_popup": "popup.html"}

chrome.browserAction.setBadgeText({text: 'new'});chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]});

// manifest.json{  "page_action":  {    "default_icon": "img/icon.png",    "default_title": "我是pageAction",    "default_popup": "popup.html"  },  "permissions": ["declarativeContent"]}
// background.jschrome.runtime.onInstalled.addListener(function(){  chrome.declarativeContent.onPageChanged.removeRules(undefined, function(){    chrome.declarativeContent.onPageChanged.addRules([      {        conditions: [          // 只有打开百度才显示pageAction          new chrome.declarativeContent.PageStateMatcher({pageUrl: {urlContains: 'baidu.com'}})        ],        actions: [new chrome.declarativeContent.ShowPageAction()]      }    ]);  });});

// manifest.json{"permissions": ["contextMenus"]}
// background.jschrome.contextMenus.create({  title: "测试右键菜单",  onclick: function(){alert('您点击了右键菜单！');}});

// manifest.json{"permissions": ["contextMenus"， "tabs"]}
// background.jschrome.contextMenus.create({  title: '使用度娘搜索：%s', // %s表示选中的文字  contexts: ['selection'], // 只有当选中文字时才会出现此右键菜单  onclick: function(params){    // 注意不能使用location.href，因为location是属于background的window对象    chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});  }});

chrome.contextMenus.create({  type: 'normal'， // 类型，可选：["normal", "checkbox", "radio", "separator"]，默认 normal  title: '菜单的名字', // 显示的文字，除非为“separator”类型否则此参数必需，如果类型为“selection”，可以使用%s显示选定的文本  contexts: ['page'], // 上下文环境，可选：["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"]，默认page  onclick: function(){}, // 单击时触发的方法  parentId: 1, // 右键菜单项的父菜单项ID。指定父菜单项将会使此菜单项成为父菜单项的子菜单  documentUrlPatterns: 'https://*.baidu.com/*' // 只在某些页面显示此右键菜单});// 删除某一个菜单项chrome.contextMenus.remove(menuItemId)；// 删除所有自定义右键菜单chrome.contextMenus.removeAll();// 更新某一个菜单项chrome.contextMenus.update(menuItemId, updateProperties);

"chrome_url_overrides":{  "newtab": "newtab.html",  "history": "history.html",  "bookmarks": "bookmarks.html"}

chrome.devtools.panels：面板相关；chrome.devtools.inspectedWindow：获取被审查窗口的有关信息；chrome.devtools.network：获取有关网络请求的信息；

{  // 只能指向一个HTML文件，不能是JS文件  "devtools_page": "devtools.html"}

<html><head>head><body>  <script type="text/javascript" src="js/devtools.js">script>body>html>

// 创建自定义面板，同一个插件可以创建多个自定义面板// 几个参数依次为：panel标题、图标（其实设置了也没地方显示）、要加载的页面、加载成功后的回调chrome.devtools.panels.create('MyPanel', 'img/icon.png', 'mypanel.html', function(panel){  console.log('自定义面板创建成功！'); // 注意这个log一般看不到});
// 创建自定义侧边栏chrome.devtools.panels.elements.createSidebarPane("Images", function(sidebar){  // sidebar.setPage('../sidebar.html'); // 指定加载某个页面  sidebar.setExpression('document.querySelectorAll("img")', 'All Images'); // 通过表达式来指定  //sidebar.setObject({aaa: 111, bbb: 'Hello World!'}); // 直接设置显示某个对象});

// 检测jQuerydocument.getElementById('check_jquery').addEventListener('click', function(){  // 访问被检查的页面DOM需要使用inspectedWindow  // 简单例子：检测被检查页面是否使用了jQuery  chrome.devtools.inspectedWindow.eval("jQuery.fn.jquery", function(result, isException){    var html = '';    if (isException) html = '当前页面没有使用jQuery。';    else html = '当前页面使用了jQuery，版本为：'+result;    alert(html);  });});
// 打开某个资源document.getElementById('open_resource').addEventListener('click', function(){  chrome.devtools.inspectedWindow.eval("window.location.href", function(result, isException){    chrome.devtools.panels.openResource(result, 20, function(){      console.log('资源打开成功！');    });  });});
// 审查元素document.getElementById('test_inspect').addEventListener('click', function(){  chrome.devtools.inspectedWindow.eval("inspect(document.images[0])", function(result, isException){});});
// 获取所有资源document.getElementById('get_all_resources').addEventListener('click', function(){  chrome.devtools.inspectedWindow.getResources(function(resources){    alert(JSON.stringify(resources));  });});

{  // Chrome40以前的插件配置页写法  "options_page": "options.html",}

{  "options_ui":  {      "page": "options.html",    // 添加一些默认的样式，推荐使用      "chrome_style": true  },}

{  // 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字  "omnibox": { "keyword" : "go" },}

// omnibox 演示chrome.omnibox.onInputChanged.addListener((text, suggest) => {  console.log('inputChanged: ' + text);  if(!text) return;  if(text == '美女') {    suggest([      {content: '中国' + text, description: '你要找“中国美女”吗？'},      {content: '日本' + text, description: '你要找“日本美女”吗？'},      {content: '泰国' + text, description: '你要找“泰国美女或人妖”吗？'},      {content: '韩国' + text, description: '你要找“韩国美女”吗？'}    ]);  }  else if(text == '微博') {    suggest([      {content: '新浪' + text, description: '新浪' + text},      {content: '腾讯' + text, description: '腾讯' + text},      {content: '搜狐' + text, description: '搜索' + text},    ]);  }  else {    suggest([      {content: '百度搜索 ' + text, description: '百度搜索 ' + text},      {content: '谷歌搜索 ' + text, description: '谷歌搜索 ' + text},    ]);  }});
// 当用户接收关键字建议时触发chrome.omnibox.onInputEntered.addListener((text) => {    console.log('inputEntered: ' + text);  if(!text) return;  var href = '';    if(text.endsWith('美女')) href = 'http://image.baidu.com/search/index?tn=baiduimage&ie=utf-8&word=' + text;  else if(text.startsWith('百度搜索')) href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text.replace('百度搜索 ', '');  else if(text.startsWith('谷歌搜索')) href = 'https://www.google.com.tw/search?q=' + text.replace('谷歌搜索 ', '');  else href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text;  openUrlCurrentTab(href);});// 获取当前选项卡IDfunction getCurrentTabId(callback){  chrome.tabs.query({active: true, currentWindow: true}, function(tabs){    if(callback) callback(tabs.length ? tabs[0].id: null);  });}
// 当前标签打开某个链接function openUrlCurrentTab(url){  getCurrentTabId(tabId => {    chrome.tabs.update(tabId, {url: url});  })}

chrome.notifications.create(null, {  type: 'basic',  iconUrl: 'img/icon.png',  title: '这是标题',  message: '您刚才点击了自定义右键菜单！'});

// background.jsfunction test(){  alert('我是background！');}
// popup.jsvar bg = chrome.extension.getBackgroundPage();bg.test(); // 访问bg的函数alert(bg.document.body.innerHTML); // 访问bg的DOM

var views = chrome.extension.getViews({type:'popup'});if(views.length > 0) {  console.log(views[0].location.href);}

function sendMessageToContentScript(message, callback){  chrome.tabs.query({active: true, currentWindow: true}, function(tabs){    chrome.tabs.sendMessage(tabs[0].id, message, function(response){      if(callback) callback(response);    });  });}sendMessageToContentScript({cmd:'test', value:'你好，我是popup！'}, function(response){  console.log('来自content的回复：'+response);});

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){  // console.log(sender.tab ?"from a content script:" + sender.tab.url :"from the extension");  if(request.cmd == 'test') alert(request.value);  sendResponse('我收到了你的消息！');});

chrome.runtime.sendMessage({greeting: '你好，我是content-script呀，我主动发消息给后台！'}, function(response) {  console.log('收到来自后台的回复：' + response);});

// 监听来自content-script的消息chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){  console.log('收到来自content-script的消息：');  console.log(request, sender, sendResponse);  sendResponse('我是后台，我已收到你的消息：' + JSON.stringify(request));});

window.postMessage({"test": '你好！'}, '*');

window.addEventListener("message", function(e){  console.log(e.data);}, false);

var customEvent = document.createEvent('Event');customEvent.initEvent('myCustomEvent', true, true);function fireCustomEvent(data) {  hiddenDiv = document.getElementById('myCustomEventDiv');  hiddenDiv.innerText = data  hiddenDiv.dispatchEvent(customEvent);}fireCustomEvent('你好，我是普通JS！');

var hiddenDiv = document.getElementById('myCustomEventDiv');if(!hiddenDiv) {  hiddenDiv = document.createElement('div');  hiddenDiv.style.display = 'none';  document.body.appendChild(hiddenDiv);}hiddenDiv.addEventListener('myCustomEvent', function() {  var eventData = document.getElementById('myCustomEventDiv').innerText;  console.log('收到自定义事件消息：' + eventData);});

getCurrentTabId((tabId) => {  var port = chrome.tabs.connect(tabId, {name: 'test-connect'});  port.postMessage({question: '你是谁啊？'});  port.onMessage.addListener(function(msg) {    alert('收到消息：'+msg.answer);    if(msg.answer && msg.answer.startsWith('我是'))    {      port.postMessage({question: '哦，原来是你啊！'});    }  });});

// 监听长连接chrome.runtime.onConnect.addListener(function(port) {  console.log(port);  if(port.name == 'test-connect') {    port.onMessage.addListener(function(msg) {      console.log('收到长连接消息：', msg);      if(msg.question == '你是谁啊？') port.postMessage({answer: '我是你爸！'});    });  }});

{  "name": "动态JS注入演示",  ...  "permissions": [    "tabs", "http://*/*", "https://*/*"  ],  ...}

// 动态执行JS代码chrome.tabs.executeScript(tabId, {code: 'document.body.style.backgroundColor="red"'});// 动态执行JS文件chrome.tabs.executeScript(tabId, {file: 'some-script.js'});

{  "name": "动态CSS注入演示",  ...  "permissions": [    "tabs", "http://*/*", "https://*/*"  ],  ...}

// 动态执行CSS代码，TODO，这里有待验证chrome.tabs.insertCSS(tabId, {code: 'xxx'});// 动态执行CSS文件chrome.tabs.insertCSS(tabId, {file: 'some-style.css'});

chrome.windows.getCurrent(function(currentWindow){  console.log('当前窗口ID：' + currentWindow.id);});

// 获取当前选项卡IDfunction getCurrentTabId(callback){  chrome.tabs.query({active: true, currentWindow: true}, function(tabs){    if(callback) callback(tabs.length ? tabs[0].id: null);  });}

// 获取当前选项卡IDfunction getCurrentTabId2(){  chrome.windows.getCurrent(function(currentWindow){    chrome.tabs.query({active: true, windowId: currentWindow.id}, function(tabs){      if(callback) callback(tabs.length ? tabs[0].id: null);    });  });}

// 读取数据，第一个参数是指定要读取的key以及设置默认值chrome.storage.sync.get({color: 'red', age: 18}, function(items) {  console.log(items.color, items.age);});// 保存数据chrome.storage.sync.set({color: 'blue'}, function() {  console.log('保存成功！');});

//manifest.json{  // 权限申请  "permissions":  [    "webRequest", // web请求    "webRequestBlocking", // 阻塞式web请求    "storage", // 插件本地存储    "http://*/*", // 可以通过executeScript或者insertCSS访问的网站    "https://*/*" // 可以通过executeScript或者insertCSS访问的网站  ],}

// background.js// 是否显示图片var showImage;chrome.storage.sync.get({showImage: true}, function(items) {  showImage = items.showImage;});// web请求监听，最后一个参数表示阻塞式，需单独声明权限：webRequestBlockingchrome.webRequest.onBeforeRequest.addListener(details => {  // cancel 表示取消本次请求  if(!showImage && details.type == 'image') return {cancel: true};  // 简单的音视频检测  // 大部分网站视频的type并不是media，且视频做了防下载处理，所以这里仅仅是为了演示效果，无实际意义  if(details.type == 'media') {    chrome.notifications.create(null, {      type: 'basic',      iconUrl: 'img/icon.png',      title: '检测到音视频',      message: '音视频地址：' + details.url,    });  }}, {urls: [""]}, ["blocking"]);

{  "pluginDesc": {"message": "A simple chrome extension demo"},  "helloWorld": {"message": "Hello World!"}}

{  "pluginDesc": {"message": "一个简单的Chrome插件demo"},  "helloWorld": {"message": "你好啊，世界！"}}

{  "description": "__MSG_pluginDesc__",  // 默认语言  "default_locale": "zh_CN",}

"btn" type="button" value="收藏" onclick="test()"/>

Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

$('#btn').on('click', function(){alert('测试')});

<a href="javascript:;" id="get_secret">请求secreta>

Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.