developer tip

Chrome 확장 프로그램 아이콘을 클릭 할 때마다 스크립트 실행

optionbox 2020. 12. 7. 08:04
반응형

Chrome 확장 프로그램 아이콘을 클릭 할 때마다 스크립트 실행


사용자가 아이콘을 클릭 할 때마다 스크립트가 실행되지만 팝업이 열리지 않도록 크롬 확장을 작성하려면 어떻게해야합니까? (나는 이것을 문서에서 직접 찾아 볼 것이지만, 어떤 이유로 든 갑자기 작동을 멈 췄고, 내가이 시점에 이르렀을 때 모든 페이지를 404ing).

매니페스트를 올바르게 설정하고 있다고 가정합니다. 지금 가지고있는 것은 다음과 같습니다.

{
  "name": "My Extension",
  "version": "0.1",
  "description": "Does some simple stuff",
  "browser_action": {
    "popup" : "mine.html",
    "default_icon": "logo.png"
  },
  "permissions": [
    "notifications"
  ]
}

매니페스트의 browser_action 섹션에서 팝업을 제거 하고 백그라운드 스크립트에서 브라우저 작업 과 함께 백그라운드 페이지 를 사용 합니다 .

chrome.browserAction.onClicked.addListener(function(tab) { alert('icon clicked')});

먼저 팝업을 표시하지 않으려면 (질문에 표시됨)에서 제거 "popup" : "mine.html"하십시오 manifest.json.

귀하는 manifest.json다음과 같이 보일 것입니다 :

{
  "name": "My Extension",
  "version": "0.1",
  "manifest_version" : 2,
  "description": "Does some simple stuff",
  "background" : {
    "scripts" : ["background.js"]
  },
  "browser_action": {
    "default_icon": "logo .png"
  },
  "permissions": ["activeTab"]
}
  • 그 참고 manifest_version가 있어야하고 있어야합니다 2.
  • 점을 유의 activeTab권한이 추가되었습니다.
  • 브라우저 작업 버튼을 클릭 할 때 한 가지만 수행 할 수 있습니다. 팝업을 표시하거나 스크립트를 실행할 수 있지만 둘 다 수행 할 수는 없습니다.

둘째, 아이콘을 클릭 할 때 스크립트를 실행하려면 background.js파일에 아래 코드를 넣으십시오 ( 파일 이름은에서 지정됨 manifest.json).

chrome.browserAction.onClicked.addListener(function(tab) {
   chrome.tabs.executeScript(null, {file: "testScript.js"});
});

마지막으로 testScript.js아이콘을 클릭 할 때 실행할 코드를 입력해야합니다.


팝업 페이지를 지정하는 대신 여기chrome.browserAction.onClicked 에 설명 된 API를 사용 하십시오 .


이것은 내가 필요한 것이지만 이것을 추가해야합니다 : 사용자가 확장 프로그램의 아이콘을 클릭 할 때와 같은 일회성 이벤트 만 필요한 경우 백그라운드 페이지는 항상 백그라운드에서 실행되므로 리소스 낭비입니다. . 대신 이벤트 페이지를 사용하십시오.

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

배경 파일을 추가해야합니다. 하지만 먼저 manifest.json에 속성을 추가해야합니다.

"background":{
    "scripts":["background.js"]
}

이제 확장 폴더의 파일 이름을 background.js로 지정합니다. 배경에서 콘텐츠 스크립트로 개체를 보내는 방법이 있습니다. 콘텐츠 스크립트의 이름이 content.js라고 가정하면이 코드 조각을 background.js 파일에 작성하면됩니다.

chrome.browserAction.onClicked.addListener(sendfunc);
function sendfunc(tab){
msg={txtt:"execute"};
chrome.tabs.sendMessage(tab.id,msg);
}

위의 코드가하는 일은 msg라는 객체를 콘텐츠 페이지로 보내는 것이며이 msg 객체는 "execute"와 같은 속성 txtt를 가지고 있습니다. 다음에해야 할 일은 콘텐츠 스크립트의 값을 다음과 같이 비교하는 것입니다.

chrome.runtime.onMessage.addListener(recievefunc);
function receivefunc(mssg,sender,sendResponse){
if(mssg.txtt==="execute"){



/*  
your code of content script
goes here
*/



}
}

now whenever you click the extension icon an object named msg is sent from background to content. the function "recievefunc()" will compare its txtt property with string "execute" if it matches your rest of the code will run.

note: msg,txtt,sendfunc,receivefunc,mssg all are variables and not chrome keywords so you can use anything you want.

hope it helps.

:)

참고URL : https://stackoverflow.com/questions/7168362/run-script-each-time-chrome-extension-icon-clicked

반응형