크롬 확장에서 jQuery를 어떻게 사용합니까?

크롬 확장에서 jQuery를 어떻게 사용합니까?

저는 크롬 익스텐션을 작성하고 있습니다.그리고 나는 사용하고 싶습니다.jQuery내 의견으로는배경 페이지는 사용하지 않고 배경 스크립트만 사용합니다.

내 파일은 다음과 같습니다.

manifest.json

{
    "manifest_version": 2,

    "name": "Extension name",
    "description": "This extension does something,",
    "version": "0.1",

    "permissions": [
        "activeTab"
    ],

    "browser_action": {
        "default_icon": "images/icon_128.png"
    },

    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },

    "icons": {
        "16": "images/icon_16.png",
        "48": "images/icon_48.png",
        "128": "images/icon_128.png"
    }
}

나의background.js파일이 이름이 지정된 다른 파일을 실행합니다.work.js

// Respond to the click on extension Icon
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript({
        file: 'work.js'
    });
});

는 내번호주논내있다습니부에내리는요의선▁inside▁of 안에 있습니다.work.js이 질문에 대한 내용은 여기서 중요하지 않다고 생각합니다.

제가 묻고 싶은 것은 제 내선번호에서 jQuery를 어떻게 사용할 수 있는지입니다.배경화면을 사용하지 않기 때문에.jQuery만 추가할 수는 없습니다.그렇다면 어떻게 하면 내 확장에 jQuery를 추가하고 사용할 수 있습니까?

는 제 from의 jQuery를 해 보았습니다.background.jsjava.

// Respond to the click on extension Icon
chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript({
        file: 'thirdParty/jquery-2.0.3.js'
    });
    chrome.tabs.executeScript({
        file: 'work.js'
    });
});

그리고 잘 작동하지만, 이런 방식으로 실행하기 위해 추가된 스크립트가 비동기식으로 실행되고 있는지 걱정이 됩니다.만약 그렇다면 jQuery(또는 내가 나중에 추가할 수 있는 다른 라이브러리) 이전에도 work.js가 실행될 수 있습니다.

그리고 제 크롬 확장판에서 타사 라이브러리를 사용하는 정확하고 가장 좋은 방법이 무엇인지 알고 싶습니다.

크롬 확장 프로젝트 및 에 jquery 스크립트를 추가해야 합니다.background다음과 . :json의 manifest.json은 다음과 .

  "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"
        }
    ]

이게 제가 한 일입니다.

제, 배경 되며, 창은 또한, 내이는정면, 트스립당다를 통해 열 수 .chrome://extensions.

다음을 수행하면 매우 간단합니다.

매니페스트.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>

출처: 구글 문서

그리고 잘 작동하지만, 이런 방식으로 실행하기 위해 추가된 스크립트가 비동기식으로 실행되고 있는지 걱정이 됩니다.만약 그렇다면 jQuery(또는 내가 나중에 추가할 수 있는 다른 라이브러리) 이전에도 work.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);

또는 약속(그리고 적절한 서명과 일치하는 추가 정보 제공):

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)
);

왜 안돼, 면왜돼, ?async/await-ed는 더 명확한 구문을 제공합니다.

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);
}

참고, Firefox에서는 다음을 사용할 수 있습니다.browser.tabs.executeScript그것이 약속을 돌려줄 것이기 때문입니다.

이미 언급한 솔루션 이외에도 다운로드할 수 있습니다.jquery.min.js로컬에서 사용합니다.

다운로드용 -

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

매니페스트.json -

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

html -

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

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

매니페스트 3 이후로 익명 기능은 허용되지 않습니다(배경에서도 마찬가지).Jquery.js 파일에는 일반적으로 익명 기능이 있습니다. 이름을 설정해야 합니다.

제 경우 페이지 로드 대신 클릭 시 크로스 문서 메시징(XDM)과 크롬 확장 실행을 통해 작동 솔루션을 얻었습니다.

매니페스트.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"});
  });
});

내 대본.js.

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

저는 jquery를 수동으로 다운로드하여 javascript 파일처럼 매니페스트 파일로 가져왔습니다.

maifest.json

"content_scripts": [
    {
      "matches": [...],
      "js": ["jquery-3.6.0.min.js", ...],
    }
  ]

folder sructure

extension
│   manifest.json
│   jquery-3.6.0.min.js
|   ...

언급URL : https://stackoverflow.com/questions/21317476/how-to-use-jquery-in-chrome-extension