[JQUERY] 어떻게 크롬 확장에 jQuery를 사용 하는가?

어떻게 크롬 확장에 jQuery를 사용 하는가?

해결법

1. ---

   1.당신은 당신의 크롬 확장 프로젝트와 같은 당신의 manifest.json의 배경 섹션에 JQuery와 스크립트를 추가해야합니다 :

   당신은 당신의 크롬 확장 프로젝트와 같은 당신의 manifest.json의 배경 섹션에 JQuery와 스크립트를 추가해야합니다 :

     "background":
       {
           "scripts": ["thirdParty/jquery-2.0.3.js", "background.js"]
       }
   

   당신이 content_scripts jQuery에해야하는 경우도 매니페스트에 추가해야합니다 :

   "content_scripts": 
       [
           {
               "matches":["http://website*"],
               "js":["thirdParty/jquery.1.10.2.min.js", "script.js"],
               "css": ["css/style.css"],
               "run_at": "document_end"
           }
       ]
   

   이것은 내가 한 일이다.

   // 확장 : 내가 올바르게 기억 경우에도, 배경 스크립트는 사용자가 크롬을 통해 열 수있는 배경 창에서 실행됩니다.

2. ---

   2.그것의 아주 쉬운 그냥 다음을 수행 :

   그것의 아주 쉬운 그냥 다음을 수행 :

   당신의 manifest.json에 다음 줄을 추가

   "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'",
   

   지금 당신은 URL에서 직접 jQuery를로드 할 수 무료입니다

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
   

   출처 : 구글 문서

3. ---

   3.그건 정말 문제가 될 안된다 : 당신은 특정 JS 컨텍스트에서 실행되는 스크립트를 대기열에, 그것은 단일 스레드의로 그 문맥이 경쟁 조건을 가질 수 없습니다.

   그건 정말 문제가 될 안된다 : 당신은 특정 JS 컨텍스트에서 실행되는 스크립트를 대기열에, 그것은 단일 스레드의로 그 문맥이 경쟁 조건을 가질 수 없습니다.

   그러나,이 문제를 제거하는 적절한 방법은 체인 호출입니다 :

   chrome.browserAction.onClicked.addListener(function (tab) {
       chrome.tabs.executeScript({
           file: 'thirdParty/jquery-2.0.3.js'
       }, function() {
           // Guaranteed to execute only after the previous script returns
           chrome.tabs.executeScript({
               file: 'work.js'
           });
       });
   });
   

   또는, 일반 :

   function injectScripts(scripts, callback) {
     if(scripts.length) {
       var script = scripts.shift();
       chrome.tabs.executeScript({file: script}, function() {
         if(chrome.runtime.lastError && typeof callback === "function") {
           callback(false); // Injection failed
         }
         injectScripts(scripts, callback);
       });
     } else {
       if(typeof callback === "function") {
         callback(true);
       }
     }
   }
   
   injectScripts(["thirdParty/jquery-2.0.3.js", "work.js"], doSomethingElse);
   

   또는, promisified (적절한 서명을 더 라인에서 가져왔다)

   function injectScript(tabId, injectDetails) {
     return new Promise((resolve, reject) => {
       chrome.tabs.executeScript(tabId, injectDetails, (data) => {
         if (chrome.runtime.lastError) {
           reject(chrome.runtime.lastError.message);
         } else {
           resolve(data);
         }
       });
     });
   }
   
   injectScript(null, {file: "thirdParty/jquery-2.0.3.js"}).then(
     () => injectScript(null, {file: "work.js"})
   ).then(
     () => doSomethingElse
   ).catch(
     (error) => console.error(error)
   );
   

   또는, 왜 도대체 아니, 비동기 /도 명확 구문 await를-에드 :

   function injectScript(tabId, injectDetails) {
     return new Promise((resolve, reject) => {
       chrome.tabs.executeScript(tabId, injectDetails, (data) => {
         if (chrome.runtime.lastError) {
           reject(chrome.runtime.lastError.message);
         } else {
           resolve(data);
         }
       });
     });
   }
   
   try {
     await injectScript(null, {file: "thirdParty/jquery-2.0.3.js"});
     await injectScript(null, {file: "work.js"});
     doSomethingElse();
   } catch (err) {
     console.error(err);
   }
   

   그것은 약속을 반환로 주, 파이어 폭스에서 당신은 browser.tabs.executeScript를 사용할 수 있습니다.

4. ---

   4.외에도 이미 언급 한 솔루션에서, 당신은 또한 로컬 jquery.min.js을 다운로드 할 수 있습니다 후 사용 -

   외에도 이미 언급 한 솔루션에서, 당신은 또한 로컬 jquery.min.js을 다운로드 할 수 있습니다 후 사용 -

   다운로드 용 -

   wget "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"
   

   manifest.json을 -

   "content_scripts": [
      {
       "js": ["/path/to/jquery.min.js", ...]
      }
   ],
   

   HTML에서 -

   <script src="/path/to/jquery.min.js"></script>
   

   참조 - https://developer.chrome.com/extensions/contentSecurityPolicy

5. ---

   5.내 경우에는 크로스 문서 메시징을 통해 작업 솔루션 (XDM)를 얻었다 및 크롬 확장 프로그램의 onclick 대신 페이지로드를 실행.

   내 경우에는 크로스 문서 메시징을 통해 작업 솔루션 (XDM)를 얻었다 및 크롬 확장 프로그램의 onclick 대신 페이지로드를 실행.

   manifest.json을

   {
     "name": "JQuery Light",
     "version": "1",
     "manifest_version": 2,
   
     "browser_action": {
       "default_icon": "icon.png"
     },
   
     "content_scripts": [
       {
         "matches": [
           "https://*.google.com/*"
         ],
         "js": [
           "jquery-3.3.1.min.js",
           "myscript.js"
         ]
       }
     ],
   
     "background": {
       "scripts": [
         "background.js"
       ]
     }
   
   }
   

   background.js

   chrome.browserAction.onClicked.addListener(function (tab) {
     chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {
       var activeTab = tabs[0];
       chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
     });
   });
   

   myscript.js

   chrome.runtime.onMessage.addListener(
       function (request, sender, sendResponse) {
           if (request.message === "clicked_browser_action") {
           console.log('Hello world!')
           }
       }
   );
   

from https://stackoverflow.com/questions/21317476/how-to-use-jquery-in-chrome-extension by cc-by-sa and MIT license