Chrome拡張機能を使用してページにJavascriptコードを埋め込む

かつて、Google Chromeで1つのブラウザーベースのおもちゃの拡張機能を作成するタスクに直面しました。

拡張するには、ページ自体のjavascript環境を使用する必要がありました。 問題は、コンテンツ拡張スクリプトからこの環境にアクセスできないことでした。



検索作業の結果、この問題に対する成功した解決策がないことがわかったため、利用可能な資料を検討した結果、開発プロセス中に追加の苦痛を伴わずにページにコードを直接埋め込むことができるシンプルなシステムが作成されました。 次に、この問題を解決する拡張機能の簡単な例を紹介します。



このアイデアは、スクリプトファイルの内容をタグに直接コピーすることに基づいています . , , .



:

manifest.json - background.js - content script, injected.js - jquery.js - ajax. jquery.com



:



manifest.json



{ "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] }



manifest- .

, injected.js web_accessible_resources, content-.



injected.js



function injected_main() { alert('Injected!'); }







, . javascript , .



background.js



$.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );







Chrome Extension API chrome.extension.getURL()



, , . ajax ( Shared DOM ) , ( injected_main()



injected.js)



. ( ), - . - injected.js .

  .     ,     ,       . 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     manifest.json -     background.js - content script,    injected.js -    jquery.js -        ajax.       jquery.com 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

     manifest.json 
      

        
        
        
      

     
      

        
        
        
      

     { "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] } 
      

        
        
        
      

     
      

        
        
        
      

         manifest-  . 
      

        
        
        
      

      ,      injected.js    web_accessible_resources,          content-. 
      

        
        
        
      

     
      

        
        
        
      

     injected.js 
      

        
        
        
      

     
      

        
        
        
      

     function injected_main() { alert('Injected!'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         ,      .       javascript  ,     . 
      

        
        
        
      

     
      

        
        
        
      

     background.js 
      

        
        
        
      

     
      

        
        
        
      

     $.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         Chrome Extension API chrome.extension.getURL()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ,   ,   .       ajax           ( Shared DOM        )     ,       ( injected_main()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        injected.js) 
      

        
        
        
      

     
      

        
        
        
      

        .         (  ),   -      .        -  injected.js    .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
  .     ,     ,       . 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     manifest.json -     background.js - content script,    injected.js -    jquery.js -        ajax.       jquery.com 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

     manifest.json 
      

        
        
        
      

     
      

        
        
        
      

     { "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] } 
      

        
        
        
      

     
      

        
        
        
      

         manifest-  . 
      

        
        
        
      

      ,      injected.js    web_accessible_resources,          content-. 
      

        
        
        
      

     
      

        
        
        
      

     injected.js 
      

        
        
        
      

     
      

        
        
        
      

     function injected_main() { alert('Injected!'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         ,      .       javascript  ,     . 
      

        
        
        
      

     
      

        
        
        
      

     background.js 
      

        
        
        
      

     
      

        
        
        
      

     $.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         Chrome Extension API chrome.extension.getURL()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ,   ,   .       ajax           ( Shared DOM        )     ,       ( injected_main()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        injected.js) 
      

        
        
        
      

     
      

        
        
        
      

        .         (  ),   -      .        -  injected.js    .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
  .     ,     ,       . 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     manifest.json -     background.js - content script,    injected.js -    jquery.js -        ajax.       jquery.com 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

     manifest.json 
      

        
        
        
      

     
      

        
        
        
      

     { "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] } 
      

        
        
        
      

     
      

        
        
        
      

         manifest-  . 
      

        
        
        
      

      ,      injected.js    web_accessible_resources,          content-. 
      

        
        
        
      

     
      

        
        
        
      

     injected.js 
      

        
        
        
      

     
      

        
        
        
      

     function injected_main() { alert('Injected!'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         ,      .       javascript  ,     . 
      

        
        
        
      

     
      

        
        
        
      

     background.js 
      

        
        
        
      

     
      

        
        
        
      

     $.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         Chrome Extension API chrome.extension.getURL()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ,   ,   .       ajax           ( Shared DOM        )     ,       ( injected_main()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        injected.js) 
      

        
        
        
      

     
      

        
        
        
      

        .         (  ),   -      .        -  injected.js    .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
  .     ,     ,       . 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     manifest.json -     background.js - content script,    injected.js -    jquery.js -        ajax.       jquery.com 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

     manifest.json 
      

        
        
        
      

     
      

        
        
        
      

     { "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] } 
      

        
        
        
      

     
      

        
        
        
      

         manifest-  . 
      

        
        
        
      

      ,      injected.js    web_accessible_resources,          content-. 
      

        
        
        
      

     
      

        
        
        
      

     injected.js 
      

        
        
        
      

     
      

        
        
        
      

     function injected_main() { alert('Injected!'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         ,      .       javascript  ,     . 
      

        
        
        
      

     
      

        
        
        
      

     background.js 
      

        
        
        
      

     
      

        
        
        
      

     $.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         Chrome Extension API chrome.extension.getURL()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ,   ,   .       ajax           ( Shared DOM        )     ,       ( injected_main()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        injected.js) 
      

        
        
        
      

     
      

        
        
        
      

        .         (  ),   -      .        -  injected.js    .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
  .     ,     ,       . 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     manifest.json -     background.js - content script,    injected.js -    jquery.js -        ajax.       jquery.com 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

     manifest.json 
      

        
        
        
      

     
      

        
        
        
      

     { "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] } 
      

        
        
        
      

     
      

        
        
        
      

         manifest-  . 
      

        
        
        
      

      ,      injected.js    web_accessible_resources,          content-. 
      

        
        
        
      

     
      

        
        
        
      

     injected.js 
      

        
        
        
      

     
      

        
        
        
      

     function injected_main() { alert('Injected!'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         ,      .       javascript  ,     . 
      

        
        
        
      

     
      

        
        
        
      

     background.js 
      

        
        
        
      

     
      

        
        
        
      

     $.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         Chrome Extension API chrome.extension.getURL()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ,   ,   .       ajax           ( Shared DOM        )     ,       ( injected_main()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        injected.js) 
      

        
        
        
      

     
      

        
        
        
      

        .         (  ),   -      .        -  injected.js    .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
  .     ,     ,       . 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     manifest.json -     background.js - content script,    injected.js -    jquery.js -        ajax.       jquery.com 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

     manifest.json 
      

        
        
        
      

     
      

        
        
        
      

     { "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] } 
      

        
        
        
      

     
      

        
        
        
      

         manifest-  . 
      

        
        
        
      

      ,      injected.js    web_accessible_resources,          content-. 
      

        
        
        
      

     
      

        
        
        
      

     injected.js 
      

        
        
        
      

     
      

        
        
        
      

     function injected_main() { alert('Injected!'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         ,      .       javascript  ,     . 
      

        
        
        
      

     
      

        
        
        
      

     background.js 
      

        
        
        
      

     
      

        
        
        
      

     $.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         Chrome Extension API chrome.extension.getURL()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ,   ,   .       ajax           ( Shared DOM        )     ,       ( injected_main()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        injected.js) 
      

        
        
        
      

     
      

        
        
        
      

        .         (  ),   -      .        -  injected.js    .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
  .     ,     ,       . 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     manifest.json -     background.js - content script,    injected.js -    jquery.js -        ajax.       jquery.com 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

     manifest.json 
      

        
        
        
      

     
      

        
        
        
      

     { "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] } 
      

        
        
        
      

     
      

        
        
        
      

         manifest-  . 
      

        
        
        
      

      ,      injected.js    web_accessible_resources,          content-. 
      

        
        
        
      

     
      

        
        
        
      

     injected.js 
      

        
        
        
      

     
      

        
        
        
      

     function injected_main() { alert('Injected!'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         ,      .       javascript  ,     . 
      

        
        
        
      

     
      

        
        
        
      

     background.js 
      

        
        
        
      

     
      

        
        
        
      

     $.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         Chrome Extension API chrome.extension.getURL()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ,   ,   .       ajax           ( Shared DOM        )     ,       ( injected_main()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        injected.js) 
      

        
        
        
      

     
      

        
        
        
      

        .         (  ),   -      .        -  injected.js    .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
  .     ,     ,       . 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     manifest.json -     background.js - content script,    injected.js -    jquery.js -        ajax.       jquery.com 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

     manifest.json 
      

        
        
        
      

     
      

        
        
        
      

     { "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] } 
      

        
        
        
      

     
      

        
        
        
      

         manifest-  . 
      

        
        
        
      

      ,      injected.js    web_accessible_resources,          content-. 
      

        
        
        
      

     
      

        
        
        
      

     injected.js 
      

        
        
        
      

     
      

        
        
        
      

     function injected_main() { alert('Injected!'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         ,      .       javascript  ,     . 
      

        
        
        
      

     
      

        
        
        
      

     background.js 
      

        
        
        
      

     
      

        
        
        
      

     $.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         Chrome Extension API chrome.extension.getURL()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ,   ,   .       ajax           ( Shared DOM        )     ,       ( injected_main()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        injected.js) 
      

        
        
        
      

     
      

        
        
        
      

        .         (  ),   -      .        -  injected.js    .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
  .     ,     ,       . 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     manifest.json -     background.js - content script,    injected.js -    jquery.js -        ajax.       jquery.com 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

     manifest.json 
      

        
        
        
      

     
      

        
        
        
      

     { "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] } 
      

        
        
        
      

     
      

        
        
        
      

         manifest-  . 
      

        
        
        
      

      ,      injected.js    web_accessible_resources,          content-. 
      

        
        
        
      

     
      

        
        
        
      

     injected.js 
      

        
        
        
      

     
      

        
        
        
      

     function injected_main() { alert('Injected!'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         ,      .       javascript  ,     . 
      

        
        
        
      

     
      

        
        
        
      

     background.js 
      

        
        
        
      

     
      

        
        
        
      

     $.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         Chrome Extension API chrome.extension.getURL()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ,   ,   .       ajax           ( Shared DOM        )     ,       ( injected_main()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        injected.js) 
      

        
        
        
      

     
      

        
        
        
      

        .         (  ),   -      .        -  injected.js    .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
  .     ,     ,       . 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     manifest.json -     background.js - content script,    injected.js -    jquery.js -        ajax.       jquery.com 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

     manifest.json 
      

        
        
        
      

     
      

        
        
        
      

     { "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] } 
      

        
        
        
      

     
      

        
        
        
      

         manifest-  . 
      

        
        
        
      

      ,      injected.js    web_accessible_resources,          content-. 
      

        
        
        
      

     
      

        
        
        
      

     injected.js 
      

        
        
        
      

     
      

        
        
        
      

     function injected_main() { alert('Injected!'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         ,      .       javascript  ,     . 
      

        
        
        
      

     
      

        
        
        
      

     background.js 
      

        
        
        
      

     
      

        
        
        
      

     $.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         Chrome Extension API chrome.extension.getURL()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ,   ,   .       ajax           ( Shared DOM        )     ,       ( injected_main()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        injected.js) 
      

        
        
        
      

     
      

        
        
        
      

        .         (  ),   -      .        -  injected.js    .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
  .     ,     ,       . 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     manifest.json -     background.js - content script,    injected.js -    jquery.js -        ajax.       jquery.com 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

     manifest.json 
      

        
        
        
      

     
      

        
        
        
      

     { "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] } 
      

        
        
        
      

     
      

        
        
        
      

         manifest-  . 
      

        
        
        
      

      ,      injected.js    web_accessible_resources,          content-. 
      

        
        
        
      

     
      

        
        
        
      

     injected.js 
      

        
        
        
      

     
      

        
        
        
      

     function injected_main() { alert('Injected!'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         ,      .       javascript  ,     . 
      

        
        
        
      

     
      

        
        
        
      

     background.js 
      

        
        
        
      

     
      

        
        
        
      

     $.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         Chrome Extension API chrome.extension.getURL()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ,   ,   .       ajax           ( Shared DOM        )     ,       ( injected_main()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        injected.js) 
      

        
        
        
      

     
      

        
        
        
      

        .         (  ),   -      .        -  injected.js    .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

. , , .



:

manifest.json - background.js - content script, injected.js - jquery.js - ajax. jquery.com



:



manifest.json



{ "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] }



manifest- .

, injected.js web_accessible_resources, content-.



injected.js



function injected_main() { alert('Injected!'); }







, . javascript , .



background.js



$.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );







Chrome Extension API chrome.extension.getURL()



, , . ajax ( Shared DOM ) , ( injected_main()



injected.js)



. ( ), - . - injected.js .

  .     ,     ,       . 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     manifest.json -     background.js - content script,    injected.js -    jquery.js -        ajax.       jquery.com 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

     manifest.json 
      

        
        
        
      

     
      

        
        
        
      

     { "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] } 
      

        
        
        
      

     
      

        
        
        
      

         manifest-  . 
      

        
        
        
      

      ,      injected.js    web_accessible_resources,          content-. 
      

        
        
        
      

     
      

        
        
        
      

     injected.js 
      

        
        
        
      

     
      

        
        
        
      

     function injected_main() { alert('Injected!'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         ,      .       javascript  ,     . 
      

        
        
        
      

     
      

        
        
        
      

     background.js 
      

        
        
        
      

     
      

        
        
        
      

     $.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         Chrome Extension API chrome.extension.getURL()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ,   ,   .       ajax           ( Shared DOM        )     ,       ( injected_main()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        injected.js) 
      

        
        
        
      

     
      

        
        
        
      

        .         (  ),   -      .        -  injected.js    .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

. , , .



:

manifest.json - background.js - content script, injected.js - jquery.js - ajax. jquery.com



:



manifest.json



{ "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] }



manifest- .

, injected.js web_accessible_resources, content-.



injected.js



function injected_main() { alert('Injected!'); }







, . javascript , .



background.js



$.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );







Chrome Extension API chrome.extension.getURL()



, , . ajax ( Shared DOM ) , ( injected_main()



injected.js)



. ( ), - . - injected.js .

  .     ,     ,       . 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     manifest.json -     background.js - content script,    injected.js -    jquery.js -        ajax.       jquery.com 
      

        
        
        
      

     
      

        
        
        
      

          : 
      

        
        
        
      

     
      

        
        
        
      

     manifest.json 
      

        
        
        
      

     
      

        
        
        
      

     { "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] } 
      

        
        
        
      

     
      

        
        
        
      

         manifest-  . 
      

        
        
        
      

      ,      injected.js    web_accessible_resources,          content-. 
      

        
        
        
      

     
      

        
        
        
      

     injected.js 
      

        
        
        
      

     
      

        
        
        
      

     function injected_main() { alert('Injected!'); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         ,      .       javascript  ,     . 
      

        
        
        
      

     
      

        
        
        
      

     background.js 
      

        
        
        
      

     
      

        
        
        
      

     $.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     
      

        
        
        
      

         Chrome Extension API chrome.extension.getURL()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ,   ,   .       ajax           ( Shared DOM        )     ,       ( injected_main()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        injected.js) 
      

        
        
        
      

     
      

        
        
        
      

        .         (  ),   -      .        -  injected.js    .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

. , , .



:

manifest.json - background.js - content script, injected.js - jquery.js - ajax. jquery.com



:



manifest.json



{ "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] }



manifest- .

, injected.js web_accessible_resources, content-.



injected.js



function injected_main() { alert('Injected!'); }







, . javascript , .



background.js



$.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );







Chrome Extension API chrome.extension.getURL()



, , . ajax ( Shared DOM ) , ( injected_main()



injected.js)



. ( ), - . - injected.js .

1. . , , .



:

manifest.json - background.js - content script, injected.js - jquery.js - ajax. jquery.com



:



manifest.json



{ "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] }



manifest- .

, injected.js web_accessible_resources, content-.



injected.js



function injected_main() { alert('Injected!'); }







, . javascript , .



background.js



$.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );







Chrome Extension API chrome.extension.getURL()



, , . ajax ( Shared DOM ) , ( injected_main()



injected.js)



. ( ), - . - injected.js .
   
   
   
   
2. . , , .



:

manifest.json - background.js - content script, injected.js - jquery.js - ajax. jquery.com



:



manifest.json



{ "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] }



manifest- .

, injected.js web_accessible_resources, content-.



injected.js



function injected_main() { alert('Injected!'); }







, . javascript , .



background.js



$.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );







Chrome Extension API chrome.extension.getURL()



, , . ajax ( Shared DOM ) , ( injected_main()



injected.js)



. ( ), - . - injected.js .
   
   
   
   
3. . , , .



:

manifest.json - background.js - content script, injected.js - jquery.js - ajax. jquery.com



:



manifest.json



{ "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] }



manifest- .

, injected.js web_accessible_resources, content-.



injected.js



function injected_main() { alert('Injected!'); }







, . javascript , .



background.js



$.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );







Chrome Extension API chrome.extension.getURL()



, , . ajax ( Shared DOM ) , ( injected_main()



injected.js)



. ( ), - . - injected.js .
   
   
   
   

. , , .



:

manifest.json - background.js - content script, injected.js - jquery.js - ajax. jquery.com



:



manifest.json



{ "name": "JS Code Injection", "version": "1.0", "manifest_version": 2, "content_scripts": [ { "matches": [ "http://extension.target.url" ], "js": [ "jquery.js", "background.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ "/injected.js" ] }



manifest- .

, injected.js web_accessible_resources, content-.



injected.js



function injected_main() { alert('Injected!'); }







, . javascript , .



background.js



$.get(chrome.extension.getURL('/injected.js'), function(data) { var script = document.createElement("script"); script.setAttribute("type", "text/javascript"); script.innerHTML = data; document.getElementsByTagName("head")[0].appendChild(script); document.getElementsByTagName("body")[0].setAttribute("onLoad", "injected_main();"); } );







Chrome Extension API chrome.extension.getURL()



, , . ajax ( Shared DOM ) , ( injected_main()



injected.js)



. ( ), - . - injected.js .