확장 프로그램을 통해 현재 열려있는 탭으로 부터 링크를 얻어오는 방법에 대해 기술하려고 한다.
우선 확장 프로그램을 로드를 하고 코드가 수정이 일어나면 ctrl + R키를 눌러서 새로고침을 하고 실행을 하면 수정 된 코드가 반영이 된다. 일반적으로 F5를 사용해서 새로고침을 하면 수정된 코드가 반영이 잘 안될 수도 있다.
우선 2가지의 방법을 사용할 것이다. javascript와 jquery를 이용해보자.
확장 프로그램은 manifest.json파일이 중요하다.
manifest.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
{
"manifest_version": 2,
"name": "Hello_World",
"description": "Print Hello, World! message",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"
"tabs"
]
}
| cs |
browser_action을 보면 icon이 있는데 해당 파일이 없으면 프로그램이 로드되지 않는다. 그냥 아무거나 만들어 주거나 해당 부분을 없애도 된다.
그리고 권한 부분에 tabs이 있는데 저건 크롬의 탭을 쓰겠다는 의미가 된다.
popup.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<head>
<style>
BODY {width : 520px; min-height:250px;}
</style>
<script src="popup.js"></script>
</head>
<body>
<div id ="urls">aa</div>
<button id = "getUrl">button</button>
</body>
</html>
| cs |
이제 버튼을 하나 만들고 텍스트를 하나 띄어줄 공간을 만들어준다.
popup.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
function getCurrentTabUrl(callback) {
var queryInfo = {
active: true,
currentWindow: true
};
chrome.tabs.query(queryInfo, function(tabs) {
var tab = tabs[0];
var url = tab.url;
callback(url);
});
}
function renderURL(statusText) {
document.getElementById('urls').textContent = statusText;
}
document.addEventListener('DOMContentLoaded', function() {
// when click, get current page link
var link = document.getElementById('getUrl');
link.addEventListener('click', function() {
getCurrentTabUrl(function(url) {
renderURL(url);
});
});
});
| cs |
7~11번줄을 보면 chrome.tabs.query부분이 있다. 해당 부분이 현재 열려있는 탭의 링크를 가져오는 부분이다.
chrome extension에 대한 기능들은 전부 chrome객체로 부터 사용이 된다.
해당 사이트는 크롬 API문서이다.
잘 가져온다.
근데 javascript라 주저리 주저리 먼가 너무 많이 써져 있어서 보기가 싫다....
jquery를 써보자.
우선 popup.html script로 jquery를 추가를 해보자.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<head>
<style>
BODY {width : 520px; min-height:250px;}
</style>
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
</head>
<body>
<div id ="urls">aa</div>
<button id = "getUrl">button</button>
</body>
</html>
| cs |
위 처럼 바꾸고
popup.js도 수정을 해보자
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
$(document).ready(function(){
$('#getUrl').click(function(){
getCurrentTabUrl(function(url) {
renderURL(url);
});
})
});
function getCurrentTabUrl(callback) {
var queryInfo = {
active: true,
currentWindow: true
};
chrome.tabs.query(queryInfo, function(tabs) {
var tab = tabs[0];
var url = tab.url;
callback(url);
});
}
function renderURL(statusText) {
document.getElementById('urls').textContent = statusText;
}
| cs |
document부분이 좀더 간결해진것 같다
이제 해당 프로그램을 로드를 해보면 아마 로드에서 에러가 나거나 정상적으로 실행이 되지 않을 것이다.
이떄 mainifest.json파일을 수정을 해보도록 하자.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
{
"manifest_version": 2,
"name": "Hello_World",
"description": "Print Hello, World! message",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"content_scripts": [ {
"js": [ "jquery.min.js" ],
"matches": ["
}],
"permissions": [
"activeTab",
"
"tabs"
]
}
| cs |
content_sctiprs부분에 js파일명을 명시를 해준다. 또는 matches 처럼 을 쓰면 된다 아마 js부분에는 all_files인가 그랬던거 같은데 ㅋㅋㅋㅋㅋㅋㅋㅋ 정확히 기억은 안나는군 ㅋㅋㅋㅋ 그냥 옆에 쭉 파일들을 나열해주면 된다. 저부분에 없는 파일을 넣어주면 해당 프로그램을 로드할때 해당 파일을 로드할 수 없다고 뜨는데 그러면 수정을 해주거나 지워주면 된다..
저렇게 코드를 수정을 했다. 이제 jquery를 쓸수있으니 ajax도 사용할 수있다.
1
2
3
4
|
router.get('/test', function(req, res, next){
console.log('test');
res.send('hello world');
})
| cs |
아까 만든 테스트 서버에 해당 라우터를 추가를 해주고..
1
2
3
4
5
6
7
8
9
|
$('#getUrl').click(function(){
$.ajax({
url : 'https://127.0.0.1/test',
success:function(data){
alert(data)
}
})
})
| cs |
서버에서 응답받은 데이터를 띄어준다.
잘뜬다.. ㅋㅋㅋ
|
댓글
댓글 쓰기