第一次做 chrome extension 就上手

background.js

'use strict';

chrome.runtime.onMessage.addListener( (request, sender, sendResponse) => {
  chrome.notifications.create('', {
    type: 'basic',
    title: 'OwO',
    message: request.message,
    iconUrl: request.firstImage
  });
  return true; 
});

contentScript.js

'use strict';

function findUserContentWrapperFrom(dom) {
    if (dom.className.includes('userContentWrapper')) {
        return dom;
    }

    if (dom.parentElement === null) {
        return null;
    }

    return findUserContentWrapperFrom(dom.parentElement);
}

function theatersIn(dom) {
    if (dom.tagName === 'A' && dom.rel === 'theater') {
        const ploi = dom.getAttribute('data-ploi');
        if (ploi) {
            return [ ploi ];
        }
    }

    var result = [];
    const count = dom.childNodes.length;
    for (let index = 0; index < count; index++) {
        Array.prototype.push.apply(result, theatersIn(dom.childNodes[index]));
    }
    return result;
}

function notification(urls) {
    chrome.runtime.sendMessage({
        message: '總共看到 ' + urls.length + ' 張圖片',
        firstImage: urls[0]
    });
}

document.addEventListener('click', function(event) {
    const warpper = findUserContentWrapperFrom(event.target);
    
    if (warpper) {
        const imageURLs = theatersIn(warpper);
        if (imageURLs && imageURLs.length) {
            notification(imageURLs);
        }
    }
}, false);

manifest.json

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["notifications", "declarativeContent", "storage", "https://*/*"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["https://*.facebook.com/*"],
      "js": ["contentScript.js"]
    }
  ],
  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
  "manifest_version": 2
}