Chrome 확장 프로그램에서 현재 탭의 URL을 얻으려면 어떻게해야하나요?

Chrome 확장 프로그램에 재미가 있는데 현재 탭의 URL을 변수에 저장하는 방법을 알고 싶습니다.

다음 chrome.tabs.query()과 같이 사용하십시오 .

chrome.tabs.query({active: true, lastFocusedWindow: true}, tabs => {
    let url = tabs[0].url;
    // use `url` here inside the callback because it's asynchronous!
});

이를 위해서는 확장 매니페스트chrome.tabs 에서 API에 대한 액세스를 요청해야합니다 .

"permissions": [ ...
   "tabs"
]

'현재 탭'의 정의는 확장 프로그램의 요구에 따라 다를 수 있습니다.

lastFocusedWindow: true쿼리의 설정 은 사용자의 집중된 창 (일반적으로 최상위 창)의 현재 탭에 액세스하려는 경우에 적합합니다.

설정 currentWindow: true하면 내선 코드가 현재 실행중인 창에서 현재 탭을 가져올 수 있습니다. 예를 들어, 확장 프로그램에서 새 창 / 팝업 (포커스 변경)을 만들지 만 확장 프로그램이 실행 된 창에서 탭 정보에 계속 액세스하려는 경우에 유용 할 수 있습니다.

lastFocusedWindow: trueGoogle이 currentWindow 항상 존재하지 않을 수 있는 사례를 호출하기 때문에이 예에서 사용하기로 선택했습니다 .

chrome.tabs.query 여기에 정의 된 속성을 사용하여 탭 쿼리를 더 세분화 할 수 있습니다.

경고! chrome.tabs.getSelected되어 사용되지 . chrome.tabs.query다른 답변에 표시된대로 사용하십시오 .

먼저 manifest.json에서 API에 대한 권한을 설정해야합니다.

"permissions": [
    "tabs"
]

그리고 URL을 저장하려면 :

chrome.tabs.getSelected(null,function(tab) {
    var tablink = tab.url;
});

다른 답변은 팝업 또는 백그라운드 스크립트에서 알고 싶다고 가정합니다.

콘텐츠 스크립트에서 현재 URL을 알고 싶다면 표준 JS 방법이 적용됩니다.

window.location.toString()

의 속성을 사용 window.location하여 호스트, 프로토콜 또는 경로와 같은 URL의 개별 부분에 액세스 할 수 있습니다 .

문제는 chrome.tabs.getSelected가 비동기 적이라는 것입니다. 아래의이 코드는 일반적으로 예상대로 작동하지 않습니다. getSelected가 아직 값을 재설정하는 콜백을 호출하지 않았기 때문에 'tablink'값은 콘솔에 쓸 때 여전히 정의되지 않습니다.

var tablink;
chrome.tabs.getSelected(null,function(tab) {
    tablink = tab.url;
});
console.log(tablink);

해결책은 함수에서 값을 사용하고 getSelected에 의해 호출되는 코드를 랩핑하는 것입니다. 이런 식으로 코드는 값이 실행되기 전에 값이 제공 될 때까지 기다려야하므로 항상 값을 설정해야합니다.

다음과 같은 것을 시도하십시오 :

chrome.tabs.getSelected(null, function(tab) {
    myFunction(tab.url);
});

function myFunction(tablink) {
  // do stuff here
  console.log(tablink);
}

안녕하세요. 현재 사이트를 친구에게 이메일로 보내는 Chrome 샘플이 있습니다. 기본 아이디어는 당신이 원하는 것입니다 ... 먼저 페이지의 내용을 가져옵니다 (당신을 위해 평가하지 않습니다) ... 나중에 URL을 얻습니다 (<-good part)

또한 훌륭한 작업 코드 예제입니다. 문서를 읽는 것보다 몹시 선호합니다.

여기에서 찾을 수 있습니다 : 이 페이지를 이메일로 보내기

이 솔루션은 이미 테스트되었습니다.

manifest.json에서 API에 대한 권한 설정

"permissions": [ ...
   "tabs",
    "activeTab",
    "<all_urls>"
]

첫 번째로드 콜 기능 https://developer.chrome.com/extensions/tabs#event-onActivated

chrome.tabs.onActivated.addListener((activeInfo) => {  
  sendCurrentUrl()
})

통화 변경 기능. https://developer.chrome.com/extensions/tabs#event-onSelectionChanged

chrome.tabs.onSelectionChanged.addListener(() => {
  sendCurrentUrl()
})

URL을 얻는 함수

function sendCurrentUrl() {
  chrome.tabs.getSelected(null, function(tab) {
    var tablink = tab.url
    console.log(tablink)
  })

를 사용하는 사용자에게는 context menu api탭 정보를 얻는 방법에 대한 문서가 즉시 명확하지 않습니다.

  chrome.contextMenus.onClicked.addListener(function(info, tab) {
    console.log(info);
    return console.log(tab);
  });

https://developer.chrome.com/extensions/contextMenus

당신은 이것을 확인해야 합니다 .

HTML

<button id="saveActionId"> Save </button>

manifest.json

  "permissions": [
    "activeTab",
    "tabs"
   ]

JavaScript
아래 코드는 활성화 된 창의 모든 URL을 버튼 클릭의 일부로 JSON 객체에 저장합니다.

var saveActionButton = document.getElementById('saveActionId');
saveActionButton.addEventListener('click', function() {
    myArray = [];
    chrome.tabs.query({"currentWindow": true},  //{"windowId": targetWindow.id, "index": tabPosition});
    function (array_of_Tabs) {  //Tab tab
        arrayLength = array_of_Tabs.length;
        //alert(arrayLength);
        for (var i = 0; i < arrayLength; i++) {
            myArray.push(array_of_Tabs[i].url);
        }
        obj = JSON.parse(JSON.stringify(myArray));
    });
}, false);