크롬 브라우저는 java script 레벨에서 클립보드 접근을 허용하지 않으므로 extension을 이용해야 한다.
background page에서 클립보드 문자열을 paste할 DOM element를 하나 준비한 다음,
메세지를 보내면 background에서 해당 DOM element에 focus를 주고 클립보드 문자열을 paste한 후 value를 가져오는 방식이다.
외부에서 extension으로 메세지를 보내기 위해 externally_connectable 설정도 필요하다.
우선 manifest.json 은 아래처럼.
externally_connectable.matches에서 메세지 전송을 허용할 도메인을 잘 지정할 것.
<all_urls> 같은 건 안된다.
{
"name": "ClipBoard",
"version": "0.0.1",
"manifest_version": 2,
"description": "read clipboard",
"background": {
"page": "background.html"
},
"externally_connectable": {
"matches": [
"*://bloodguy.com/*"
]
},
"permissions": [
"clipboardRead"
]
}
클립보드 문자열을 paste할 HTML 페이지는 아래와 같음.
background.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="background.js"></script>
</head>
<body>
<textarea type="text" id="text">
</body>
<html>
메세지를 받아 클립보드 문자열을 반환할 background.js
var textElem = null;
function getTextElem()
{
if (!textElem) textElem = document.getElementById('text');
return textElem;
}
chrome.runtime.onMessageExternal.addListener(function(req, sender, sendResponse){
if (req.cmd == 'getClipboard') {
var e = getTextElem();
e.focus();
e.value = '';
document.execCommand('paste');
sendResponse({'result': e.value});
}
});
마지막으로 background에 메세지를 보내 클립보드 문자열을 받아오는 건 아래처럼 하면 됨.
<!DOCTYPE HTML>
<html>
<head>
<title>clipboard read test</title>
<script>
// chrome extension과 통신하여 클립보드 문자열 가져오기
var Clipboard = {
// 실제 extension id를 지정할 것
extensionId: 'EXTENSION_ID',
req: {cmd: 'getClipboard'},
get: function(callback)
{
chrome.runtime.sendMessage(Clipboard.extensionId, Clipboard.req, function(r){
callback(r.result);
});
}
};
document.addEventListener('DOMContentLoaded', function()
{
document.getElementById('btn').addEventListener('click', function(e){
Clipboard.get(function(clipboard_str){
console.log(['clipboard', clipboard_str]);
});
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="클립보드 가져오기" />
</body>
</html>
