Chrome 확장 개발 : 확장에서 페이지로 JavaScript를 전송하고 싶습니다.

목표

Google 크롬 확장 프로그램에서 보고 있는 페이지로 자바스크립트를 전송하여 해당 페이지의 Window 개체에 개체를 추가하는 확장 프로그램을 만듭니다. 덧붙여 이번 성과물은 GitHub 로 볼 수 있다.

1. 확장 만들기

파일 구성은 매니페스트, 아이콘 이미지, 2개의 JavaScript로 구성된다.

├── content-script.js
├── embeded-script.js
├── icons
│   ├── icon128.png
│   ├── icon16.png
│   ├── icon19.png
│   └── icon48.png
└── manifest.json

content-script.js

페이지를 열 때 실행할 스크립트. 이 스크립트는 Chrome 확장 프로그램의 닫힌 환경에서 실행되므로 페이지의 Window 개체에 개체를 추가할 수 없습니다. 따라서 페이지에 <script> 태그를 그려서 Window 객체를 변경하는 스크립트를 보냅니다.

content-script.js

var injectScript;

injectScript = function(file, node) {
  var s, th;
  th = document.getElementsByTagName(node)[0];
  s = document.createElement('script');
  s.setAttribute('type', 'text/javascript');
  s.setAttribute('src', file);
  return th.appendChild(s);
};

injectScript(chrome.extension.getURL('/embeded-script.js'), 'body');

embedded script.js

전송되는 스크립트. 이 스크립트는 Window 객체를 조작할 수 있다.

embeded-script.js

window.MyEmbededProgram = {
  helloWorld: function() {
    alert("Hello World!")
  }
};

주의점으로서, 보내진 스크립트는 확장으로부터 제공되었다고 할 수 있지만, 단지 JavaScript가 되기 때문에, 직접 확장의 기능이나 API를 호출할 수 없다. 이것을 해결하는 방법은 다음에 소개하기 때문에 여기에서는 할애한다.

manifest.json

페이지에 스크립트를 보내고 싶기 때문에, 할 수 있는 설정을 manifest.json 에 선언할 필요가 있다. 먼저 모든 페이지에서 content-script.js가 실행되도록 matches를 <all_urls>로 설정합니다. permissions 에 대해서도 <all_urls> 를 설정해 둔다. 그런 다음 web_accessible_resources를 embeded-script.js로 설정하여 페이지에서 확장 JS를 읽을 수 있습니다.

manifest.json

{
  "name": "Example 1: Embed Scripts to All Web Pages",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "This is an example to embed scripts to all web pages",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "content-script.js"
      ]
    }
  ],
  "web_accessible_resources": [
    "embeded-script.js"
  ],
  "permissions": [
    "<all_urls>"
  ]
}

2. 실행해보기

적절한 웹 사이트로 가서 관리자를 열면 MyEmbededProgram.helloWorld()를 실행하십시오. 그러면 'Hello World!'라고 경고가 나올 것이다.

Chrome 확장 개발 시리즈

마지막 : Hello World 할 수있는 확장을 만들고 싶습니다.
다음 번: ???