coding-train

What to do?

Make a chrome extension that looks up a selected word’s definition using the Wordnik API.

References

1. Introduction to Chrome Extensions

2. Bookmarklets

javascript:(function(){})()

위 코드와 같이 IIFE를 사용하면 bookmarklet을 만들 수 있음.

(function() {
  var elts = document.getElementsByTagName('p');
  for (var i = 0; i < elts.length; i++) {
    elts[i].style['background-color'] = '#C036F3';
  }
})();

위 코드를 bookapplet.html의 <a href=""> 안에 넣어보자.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BookMarklet</title>
</head>
<body>
    <h1>BookMarklet</h1>
    <p>
        This is a paragraph of <a href="javascript:(function() {
            var elts = document.getElementsByTagName('p');
            for (var i = 0; i < elts.length; i++) {
              elts[i].style['background-color'] = '#C036F3';
            }
          })()">Bookmarklet!</a>
    </p>
</body>
</html>

페이지의 모든 paragraph 태그의 background-color가 퍼플로 바뀐다.
또한, 이 링크를 즐겨찾기로 등록하면, Bookmarklet이 즐겨찾기에 등록이 된다.

(function () {
  var script = document.createElement('script');
  script.src = 'http://shiffman.net/a2z/js/bookmarklet.js';
  document.body.appendChild(script);
})();

위와 같은 방식으로 자바스크립트를 추가할 수도 있으며,

(function () {
  var script = document.createElement('script');
  var url = 'http://shiffman.net/a2z/js/bookmarklet.js';
  script.src = url + "?" + new Date().getTime();
  document.body.appendChild(script);
})();

이런 방식으로 자동 업그레이드 적용도 가능할 것이다.

3. Chrome Extension

3-1. Content Scripts
manifest.json
{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "0.1"
}
content scripts
{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "0.1",
  "content_scripts": [
    {
        "matches": [
        "<all_urls>"
        ],
        "js": ["content.js"]
    }
  ]
}

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "0.1",
  "content_scripts": [
    {
        "matches": [
            "http://github.com/*",
            "https://github.com/*",
            "http://*.github.com/*",
            "https://*.github.com/*"
        ],
        "js": ["content.js"]
    }
  ]
}
backround scripts
// background.js

// Add a listener for the browser action
chrome.browserAction.onClicked.addListener(buttonClicked);

function buttonClicked(tab) {
  // The user clicked the button!
  // 'tab' is an object with information about the current open tab
}

  "browser_action": {
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["background.js"],
  }

{
    "active": true,
    "audible": false,
    "autoDiscardable": true,
    "discarded": false,
    "groupId": -1,
    "height": 900,
    "highlighted": true,
    "id": 831,
    "incognito": false,
    "index": 2,
    "mutedInfo": {
        "muted": false
    },
    "pinned": false,
    "selected": true,
    "status": "complete",
    "width": 1182,
    "windowId": 722
}
messaging
function buttonClicked(tab) {
  var msg = {
    message: "user clicked!"
  }
  chrome.tabs.sendMessage(tab.id, msg);
}

// Listen for messages
chrome.runtime.onMessage.addListener(receiver);

// Callback for when a message is received
function receiver(request, sender, sendResponse) {
  if (request.message === "user clicked!") {
    // Do something!
  }
}

"browser_action": {
  "default_title": "you can also add a tool tip here",
  "default_popup": "popup.html"
}

var word = chrome.extension.getBackgroundPage().word;
omnibox (address bar)
  "omnibox": {
    "keyword": "a2z"
  }

// This event is fired when the user hits "enter"
chrome.omnibox.onInputEntered.addListener(omniChanged);

function omniChanged(text) {
  // The variable "text" has the text the user typed
  // You could open a new tab on a specific page that uses that text
  // or send a message to a content script
  // etc.
}
override page
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  }
API