크롬 익스텐션에 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 관심|2018. 5. 4. 10:50
반응형


내가 만든 웹사이트가 아닌 타인이 만든 웹사이트에 내가 만든 기능이나 화면을 넣을 수 있으면 재미있을 것 같았다. 그리고 좀 더 편리하게 인터넷을 사용 할 수 있을 것 같았다. 크롬에서 제공하는 익스텐션 덕분에 그것이 가능하다는 것을 알았다.


위의 스크린 샷은 구글에 크롬익스텐션을 이용해서 '안녕하세요~' 라고 적힌 div 엘레멘트를 추가 한 것이다.



어렵지 않으니 재미로 한번 해보자~ 


1. 폴더를 만든다.


2. 그 폴더에 크롬익스텐션에서 사용할 manifest.json 파일을 만든다.


{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2,
"content_scripts":[
{
"matches": ["https://www.google.com/*"],
"js": ["contentScript.js"]
}
]
}


위를 보면 matches 라고 어떤 사이트에 스크립트를 적용할껀지 설정 할 수 있다.

그리고 js엔 적용할 스크립트의 경로를 적는다.


3. contentScript.js를 폴더에 만든다.

 


//Creating Elements
var divElement = document.createElement("div")
var t = document.createTextNode("안녕하세요~");
divElement.appendChild(t);
//Appending to DOM
console.log('hi')
document.body.appendChild(divElement);



4. chrome://extensions/

에 들어가서 upload unpacked 를 눌러서 파일들을 저장한 폴더를 업로드 하면 끝.



댓글()

플라스크 사용해보기

Computer 관심/Flask|2018. 5. 3. 15:11
반응형

장고를 가지고 심심풀이로 API서버를 만들어 보려고 하니까

장고를 놓은지 오래되서 기억이 가물 가물 했다. 또.... 이전에 일했던 기억 때문에 쓰고 싶지 않았다.. ㅠㅠ

확실히 장고가 좋긴하지만 심플한 서버만 사용하고 싶어서 플라스크로 만들어 보면 어떨가 생각이 들었다.

 

 

 

1. 플라스크 시작하기

 

플라스크 홈페이지(http://flask.pocoo.org/)를 들어가면 아래와 같이 정말 간단하게 플라스크 서버를 만든 것을 볼 수 있다.

 

1) main.py 파일 작성

from flask import Flask
app = Flask(__name__)

@app.route("/")
def getHelloMsg():
    return "Hello World!"

 

2) command로 서버 실행하기 

$ pip install Flask
$ FLASK_APP=main.py flask run
 * Running on http://localhost:5000/

윈도우 실행시 FLASK_APP=main.py이 아닌 set FLASK_APP=main.py라고 적어야 한다.

장고서버와 비교했을 때 단 하나의 파이썬 파일 하나로 심플하게 서버를 만들 수 있다.

 

 

서버에 아무런 설정 없이 이대로 브라우저에서 요청을 할 시 브라우저는 아래와 같은 에러가 발생한다.

(브라우저가 아닌 서버를 통해 데이타를 요청하면 줌)

Failed to load http://localhost:5000/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

 

 

 

2. 크로스오리진 문제 해결하기

 

서버에서 브라우저의 크로스브라우징을 허용을 해줘야한다. 그래야 데이타를 클라이언트에서 리턴 받을 수 있다. 여기서 사용한 모듈은 flask-cors다

 

flask-cors 홈페이지

http://flask-cors.readthedocs.io/en/latest/

 

1) 설치

$ pip install -U flask-cors

 

2) 코드에 적용

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def getHelloMessage():
  return "Hello"

이렇게 하면 더 이상 브라우저에서 에러가 발생하지 않는다. 세부적으로 설정하는 것은 홈페이지를 확인하자

 

데이터를 받고 싶으면 아래와 같이 사용한다.

@app.route("/", methods = ['POST']) 
def getHelloMsg():
  # url 요청을 통해 받은 데이터
  search = request.args.get("search")
  page = request.args.get("page")


  # 폼을 통해 입력받은 데이터
  email = request.form.get('email')
  password = request.form.get('password')


  #json 요청을 통해 받은 데이터
  data = request.get_json()
  
  return "hello"

여기까지 하게 되면 클라이언트는 사용자의 데이터를 입력받고 서버의 내용을 출력해주는 기능만 하고 데이터의 가공은 서버에서만 하도록 테스크의 분리가 가능하다. 

 

 

 

3. flask-SQLAlchemy를 사용하여 데이터 저장하기

 

flask-SQLALchemy는 sql문을 작성하는 대신에 ORM으로 디비를 쉽게 관리 할 수 있도록 도와주는 모듈이다.

http://flask-sqlalchemy.pocoo.org/2.3/quickstart/

 

1) 플라스크 알케미 설치하기

pip install flask-sqlalchemy

 

2) SQLAlchemy를 세팅하고 DB의 모델(구조)까지 만들기

 

아래의 코드는 flask-SQLAlchemy와 사용하기 간단한 sqlite db를 사용한 공식 예제이다.

 

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:////tmp/test.db'
db = SQLAlchemy(app)


class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True, nullable=False)
    email = db.Column(db.String(120), unique=True, nullable=False)

    def __repr__(self):
        return '<User %r>' % self.username

 

3) 만들은 모델을 바탕으로 디비 생성하기

- cmd창에 python이라고 쳐서 파이썬 쉘로 들어간다.

- 아래와 같이 입력한다.

>>> from yourapplication import db 
>>> db.create_all()

 

4) 모델을 바탕으로 객체를 만들기

>>> from yourapplication import User
>>> admin = User(username='admin', email='admin@example.com')
>>> guest = User(username='guest', email='guest@example.com')

 

5) 객체를 디비에 저장하기

>>> db.session.add(admin)
>>> db.session.add(guest)
>>> db.session.commit()

 

6) 데이터에 저장된 값 불러오기

>>> User.query.all()
[<User u'admin'>, <User u'guest'>]
>>> User.query.filter_by(username='admin').first()
<User u'admin'>

그러나!!!!!!

 

 

 

4. flask-migrate를 통해 디비구조를 변경하기

 

 

이때 테이블의 구조를 수정해야 할 때 지금까지 만든 디비를 날리고 다시 만들어야 한다는 단점이 있다.

이렇게 할 필요없이 디비변경을 관리해 주는 것이 migration이라고 하는데 장고처럼시퀄알케미에서는 기본으로 제공을 하지 않았다.

이럴바엔 그냥 sql문을 작성하고 수정도 sql문으로 하는게 더 낫겠다 라고 생각이 들었다.

 

그리고 그냥 시퀄알케미를 지우고 sql문으로 디비를 직접 만들려고 하는 찰나.

flask-migrate라는 모듈이 있는 것을 알게 됬고 이걸 사용함으로써 디비구조변경을 더 간단히 할 수 있게 되었다.

https://flask-migrate.readthedocs.io/en/latest/

 

여기 나온데로 따라하면 간단하게 마이그레이션을 할 수 있다

 

 

 

추가사항!

실행하기전에 set FLASK_DEBUG=True를 커멘드에 입력을 하면 에디터에 코드가 변경될 때마다. 자동으로 리로드가 된다.

댓글()