크롬 익스텐션에 vuejs 사용하기 (development of chrome extension with vuejs)
Computer 관심2018. 5. 4. 14:06
반응형
content script를 사용해서 뭘 만들라 할때 html을 순수 자바스크립트로 만드는건 너무 귀찮은 일이다.
이걸 어떻게 해야 할까.....하다가 vuejs와 html 템플릿을 사용하면 어떻까 싶었고! 삽질을 했다.
먼저 매니페스트 파일을 이렇게 수정하였다.
manifest.json
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2,
"content_scripts":[
{
"matches": ["https://www.google.com/*"],
"js": ["vue.js","contentScript.js"]
}
],
"web_accessible_resources": ["template.html"]
}
여길 보면 js에 vue.js 스크립트를 넣어서 Vue객체를 받을 수 있도록 하였다. 또 템플릿을 추가 하기 위해 web_accessible_resources 를 추가한걸 볼 수 있다.
그 템플릿 파일을 보면
template.html
{{ message }}
contentScript.js
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var div = document.createElement('div');
div.setAttribute("id", "app")
div.innerHTML = this.responseText;
document.body.insertBefore(div, document.body.firstChild);
} else {
console.log('files not found');
}
};
xhttp.open("GET", chrome.extension.getURL("/template.html"), true);
xhttp.send();
setTimeout(function(){
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
}, 100);
비동기 요청을 한뒤에 템플릿을 body 안에 추가한다. 그런데 비동기 요청이 시간이 더 오래걸리기 때문에 vue 객체를 생성할때 setTimeout을 주어서 템플릿이 바디에 먼저 들어간뒤 뷰객체가 생성되도록 하였다. 프로미스로 해볼려 했는데 ㅠㅠ 잘 안됬다 (내가 못해서 그런듯)
더 좋은 방법 있으면 알려주시면 감사하겠습니다.
'Computer 관심' 카테고리의 다른 글
| DNS관리 (0) | 2022.10.28 |
|---|---|
| visual code에서 파일 확장자 마다 인덴테이션 다르게 주기 (0) | 2019.11.04 |
| 크롬익스텐션으로 웹사이트에 엘레멘트 추가하기 [크롬익스텐션 개발] (0) | 2018.05.04 |
댓글()
