크롬 플러그인의 content_scripts.js 분석

사이트 별로 다른 Content Script 적용

  • 사이트 마다 다른 스크립트 파일을 적용하려면 아래의 패턴을 적용한다.
    "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mygooglestyles.css"],
      "js": ["jquery.js", "mygooglescript.js"]
    },
    {
      "matches": ["http://www.yahoo.com/*"],
      "css": ["myyahoostyles.css"],
      "js": ["jquery.js", "myyahooscript.js"]
    }
    ],
    

Content Script 의 jQuery 사용

  • content_script.js 에서 jquery로 DOM 을 접근하면, 크롬 익스텐션에서 정의한 popup 페이지에 대한 DOM 접근을 한다.
    "browser_action": {
    "default_popup": "popup.html"
    },
    "content_scripts": [
    {
      "matches": ["http://*/*","https://*/*",""],
      "js": ["js/jquery.js","js/content_script.js"]
    }
    ]
    
    <br /><a href="http://js/jquery.js">http://js/jquery.js</a>
    <a href="http://js/content_script.js">http://js/content_script.js</a>
    
    
    <div id='product_name'>Injecting Product Name....</div>
    <!-- ... -->
    
    
    // content_script.js
    function onWindowLoad() {
    console.log("팝업 페이지의 DOM 접근 : ", $("#product_name").text());
    // 위 결과는 위 html 파일에서 product_name 아이디의 태그 값인 Injecting Product Name.... 이 된다.
    }
    
    window.onload = onWindowLoad;
    
  • manifest.json 파일의 js 속성을 위처럼 jquery.js, content_script.js 로 지정하면 content_script 에서 $ 연산자 사용이 가능하고, ajax 콜도 가능하다.

Advertisements

Author: Josh Jang

Mobile & Web Enthusiast, calling myself a geek. Interested in developing stuffs to make it easier for people and increasing productivity in what people have to do. True Beer Geek.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s