1. popup.html
- getUrl 버튼을 누르면 URL을 불러오도록 동작
- result 자리에 불러온 URL이 담기도록할 것
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My Chrome Extension</title>
<link rel="stylesheet" href="" />
</head>
<body>
<div id="result">ex</div>
<button id="getUrl">getURL</button>
<script src="popup.js"></script>
</body>
</html>
2. manifest.json
1) permissions에 유의하기
- 참고한 레퍼에서는 permissions에 <all_urls> 사용하여 모든 URL을 참조할 수 있도록 함
- Permissions is unknown or URL pattern is malformed 오류 발생
- Manifest version3에서는 사용할 수 없는 방법이라고 함
- host_permissions을 추가하여 오류 해결
{
"manifest_version": 3,
"name": "Chrome Extension",
"version": "0.1.0",
"description": "Bringko Chrome Extension for zendesk",
"icons": {
"32": "icons/icon_32.png"
},
"background": {
"service_worker": "background.js",
"icon": "icon-34.png"
},
"action": {
"default_title": "Chrome Extension",
"default_popup": "popup.html"
},
"host_permissions": [
"https://*/*"
],
"permissions": [
"storage",
"activeTab",
"tabs"
]
}Chrome Extensions: Migrating to Manifest V3 - Chrome Developers
A high-level guide to how you can migrate your Manifest V2 extensions to Manifest V3.
developer.chrome.com
[chrome extension] 현재 탭으로부터 링크를 얻어오자
확장 프로그램을 통해 현재 열려있는 탭으로 부터 링크를 얻어오는 방법에 대해 기술하려고 한다. 우선 확...
blog.naver.com
3. popup.js
// 현재 윈도우 화면에서 URL 정보를 얻어오는 함수
function getTabUrl(callback) {
var queryInfo = {
active : true,
currentWindow : true
};
chrome.tabs.query(queryInfo, function(tabs) {
var tab = tabs[0];
var url = tab.url;
callback(url);
});
}
// result div에 URL 값을 뿌려주는 함수
function renderUrl(statusText) {
document.getElementById('result').textContent = statusText;
}
// 클릭 이벤트가 발생했을 경우 getTabUrl와 renderUrl 함수를 사용해
// 확장 프로그램 상에 URL Road
document.addEventListener('DOMContentLoaded', function() {
var link = document.getElementById('getUrl');
link.addEventListener('click', function() {
getTabUrl(function(url) {
renderUrl(url);
});
});
});
4. 결과
