[크롬:앱] 크롬 확장 프로그램 #1. Hello World

Programming/Frontend 2022. 2. 21. 19:46
반응형

갑자기 크롬 확장 앱이 만들어 보고 싶어졌습니다. 몇년 전에 관심을 가지고 잠깐 보기는 했지만, 멀 만들지??? 하는 생각에 잠깐 보고, 이렇게 만드는 구나~~ 하고 말았는데, 유투브 동영상에 나오는 광고가 귀찮아서 없애볼까 하는 생각에 다시 크롭앱을 보기 시작했네요..

크롬 관련된 개발할 수 있는 종류가 몇가지 됩니다. https://developer.chrome.com/docs/

 

Documentation - Chrome Developers

Build the next generation of web experiences.

developer.chrome.com

이중에서 페이지가 로딩되면 곧바로 실행되어야 하니, Extensions 항목을 먼저 공부해 봅니다.

https://developer.chrome.com/docs/extensions/

 

Extensions - Chrome Developers

Extensions are software programs, built on web technologies (such as HTML, CSS, and JavaScript) that enable users to customize the Chrome browsing experience.

developer.chrome.com

크롬앱은 기본 js/ ts 구동이 됩니다. js는 쉽지만, 또 쉽지 않은 언어라, 잠시 훑어 보고 오시는 것도 좋은 방법일 거 같습니다.

소스 보기

잠시 크롬 확장앱 구조를 보겠습니다. (샘플 참조 : https://developer.chrome.com/docs/extensions/mv3/overview/)

- manifest.json
- hello.html
- icon.png

1. manifest.json

해당 파일은 설정 페이지 입니다. 실행시 필요 권한, 백그라운드 콜백 파일 등을 지정합니다. 현재는 v3를 사용하는 것을 권장하고 있습니다.

{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  },
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+F",
        "mac": "MacCtrl+Shift+F"
      },
      "description": "Opens hello.html"
    }
  }
}

1-1. action : 등록된 아이콘을 클릭할 경우 실행될 팝업창과 아이콘을 지정합니다.

1-2. commands : 바로가기 키를 활성화 하는 명령어 입니다. 해당 키조합을 누를 경우, 실행 됩니다. (선택사항. 없어도 됩니다.)

2. hello.html

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

3. icon.png

아이콘 파일 링크 : https://raw.githubusercontent.com/GoogleChrome/chrome-extensions-samples/main/tutorials/hello-world/hello_extensions.png

크롬 extensions을 웹브라우저에 등록하기

1. 크롬 브라우저 주소표시줄 - chrome://extesions

2. 개발자 모드 선택 > [압축해제된 확장 프로그램을 로드합니다.] 클릭

3. 작업한 소스 폴더 선택

4. 크롬 "확장 브라우저" 아이콘 클릭 > "Hello Extensions" 핀 클릭

5. 크롬 "확장 브라우저" 아이콘 왼쪽 > "Hi" 아이콘 클릭

기본 크롬 Extensions 앱 작업 및 크롬 브라우저 추가 작업은 완료했습니다.

다음은 크롬 Extensions에서 Service Worker로  자동실행하여서 현재 웹페이지의 배경화면을 변경하는 작업을 해보겠습니다.

감사합니다.

반응형
블로그 이미지

BitSense

뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

Tag Chrome Extensions, manifest.json, 크롬익스텐션, 크롬확장앱
트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

[VueJs] amcharts3 사용하기

Programming/Frontend 2020. 6. 19. 18:00
반응형

설치

npm install amcharts3 --save

사용 샘플 소스

<template>
	<div id="chartdiv" style="width: 100%; height: 400px;" ref="chartdiv" />
</template>

<script>
import 'amcharts3'

import AmSerial from 'amcharts3/amcharts/serial'



export default {

	name: 'AmCharts',
	data: () => ({
		chartConfig: {
			type: 'serial',
			categoryField: 'type',

			chartCursor: {},

			graphs: [
			
	{
				
	type: 'column',
					title: 'Pizza types',

					valueField: 'sold',

					fillAlphas: 0.8

				}

			],

			dataProvider: [

				{ type: 'Margherita', sold: 120 },

				{ type: 'Funghi', sold: 120 },

				{ type: 'Capricciosa', sold: 120 },
				{ type: 'Quattro Stagioni', sold: 120 }
 
			]
		
}
	}),
	created() {
		AmCharts.makeChart(this.$refs.chartdiv, this.chartConfig)
	}
}
</script>

오류 수정

import AmCharts from 'amcharts3'

위 형태로 하면 AmCharts.makeChart() 함수를 찾을 수 없다는 오류가 나와서 수정

참조 URL

https://github.com/developerKumar/AmchartsUse

반응형
블로그 이미지

BitSense

뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

Tag amcharts, vuejs
트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

[VueJs] API 기능 모음 (추가 중)

Programming/Frontend 2020. 6. 7. 00:23
반응형

history.back()
this.$router.go(-1)

UI 강제 업데이트
this.$forceUpdate()

// string replace all
let replaceAll = function (source, needle, target) {
    return source.split(needle).join(target)
}
// &lt; &gt;를 < > 변환
let decodeHTML = function (html) {
    let txt = document.createElement('textarea')
    txt.innerHTML = html
    return txt.value
}

 

반응형
블로그 이미지

BitSense

뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

Tag API, Javascript, vuejs, 기능모음
트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

[VueJs] vue-chartjs 로 멀티라인 그래프 그리기

Programming/Frontend 2020. 5. 11. 21:07
반응형

머신러닝 같은 강좌나 책을 읽다 보면 간혹 마주치는 단어가 시계열 혹은 시계열화 이란 것입니다. 말은 어려워 보이는데 영어로는 "time series" 라고 합니다. 한글은 어렵지만 영어는 어느 정도 뜻이 이해가 갑니다. 그냥 순차적으로 먼가 하는 거구나... 라는 센쑤~!

개발자들이 디비 등에서 추출한 정보는 보통 테이블 형식의 텍스트로 제공하는 경우가 많습니다. 이것을 보기 좋게 그래프 형태로 변형해서 보여주면, 직관적으로 이해하게 되고, 실시간 의사결정이 가능해 진다고 합니다. 예전부터 알고는 있었지만, 막상 그래프 표현은 좀 어렵기는 합니다.

vuejs에서는 되게 쉽습니다. 시계열의 대표적인 것이 Line Chart 일 것 같아서, 소스로 좀더 쉽게 만들어 보도록 하겠습니다. Line Charts 는 아래와 같은 형태 입니다.

설치

// 설치
npm i --save vue-chartjs chart.js

LineChart 템플릿 소스 샘플

// 공용 사용 가능성이 있어서 components/Charts 에 컴포넌트 형태로 저장하여 사용
// data = chartData 외부에서 가져옴
// chartData = {labels: ['전체 범주'], data: { label: '그래프 범주', data: []}
<script>
    import {Line} from 'vue-chartjs'

    export default {
        name: 'LineChart',
        extends: Line,
        props: ['chartData'],
        data: () => ({
                colorSets: [ // 여러 그래프 사용을 위해서 색상표 예약
                    {fore: '#EF9A9A', back: '#B71C1C'},
                    {fore: '#F48FB1', back: '#880E4F'},
                    {fore: '#CE93D8', back: '#4A148C'},
                    {fore: '#B39DDB', back: '#311B92'},
                    {fore: '#9FA8DA', back: '#1A237E'},
                    {fore: '#64B5F6', back: '#0D47A1'},
                    {fore: '#4FC3F7', back: '#01579B'},
                    {fore: '#0097A7', back: '#006064'},
                    {fore: '#00897B', back: '#004D40'},
                    {fore: '#81C784', back: '#1B5E20'},
                ],
                datacollection: { // 데이터 샘플
                    // 전체 범주
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    datasets: [
                        {
                        	// 그래프별 범주
                            label: 'Data One',
                            backgroundColor: '#f87979',
                            pointBackgroundColor: 'white',
                            borderWidth: 1,
                            pointBorderColor: '#249EBF',
                            // 실제 데이터. labels와 배열 순서가 맞아야 함. 빈곳은 0으로 보정이 필요
                            data: [40, 20, 30, 50, 90, 10, 20, 40, 50, 70, 90, 100]
                        }
                    ]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            },
                            gridLines: {
                                display: true
                            }
                        }],
                        xAxes: [{
                            gridLines: {
                                display: false
                            }
                        }]
                    },
                    legend: {
                        display: true
                    },
                    responsive: true,
                    maintainAspectRatio: false
                }
            }
        ),
        mounted() {
            this.init()
        },
        methods: {
            init() {
                let data = this.chartData.chartData

                let datasets = []
                let pos = 0
                data.forEach((site) => {
                    let colors = this.colorSets[pos]

                    datasets.push({
                        label: site.label,
                        borderWidth: 2,
                        borderColor: colors.back,
                        backgroundColor: colors.back,
                        pointBorderColor: colors.fore,
                        pointBackgroundColor: colors.fore,
                        fill: false,
                        data: site.data
                    })

                    pos++
                })

                this.datacollection = {
                    labels: this.chartData.labels,
                    datasets: datasets
                }

                this.render()
            },
            render() {
                this.renderChart(this.datacollection, this.options)
            }

        }
    }
</script>

<style scoped>

</style>

vuejs 샘플 소스

<template>
    <v-container fluid>
        <v-row>
          <v-col>
            <div class="text-lg-center pa-5" style="width: 100%;" v-if="chartLoading">
              <v-progress-circular
                  width="7"
                  size="70"
                  indeterminate
                  color="red"
              ></v-progress-circular>
            </div>
            <line-chart :chartData="chartData" v-if="!chartLoading"/>
          </v-col>
        </v-row>
    </v-container>
</template>

<script>
    // '@/components/Charts/LineChart' 사용 가능하면 대체를 해도 된다.
    import LineChart from '../Charts/LineChart'

    export default {
        name: 'List',
        components: { LineChart },
        data: () => ({
            chartLoading: false, // 데이터를 불러오기 전까지는 progress circle을 사용
            chartData: []
        }),
        mounted() {
            this.init()
        },
        methods: {
            init() {
                let item = '{"labels":["01","02","03","04","05","06","07","08","09","10","11"],"chartData":[{"label":"다음","data":["65","13","22","125","41","142","156","121","24","29","151"]},{"label":"다우존스","data":["1","1","0","6","1","3","6","8","0","0","6"]},{"label":"네이버","data":["65","13","22","119","41","139","150","119","20","28","147"]},{"label":"뉴스원","data":["61","7","17","105","28","128","138","108","10","20","137"]},{"label":"다나와","data":["0","0","0","1","0","0","1","0","0","0","0"]}]}'
            	let data = JSON.parse(item)
                
                this.chartData = {
                    labels: data.labels,
                    chartData: data.chartData
                }

                // 차트 보이기
                this.chartLoading = false
            }
    }
</script>

<style scoped>
 
</style>

 

소스 샘플 결과

반응형
블로그 이미지

BitSense

뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

Tag vue-chartjs, vuejs, 그래프, 멀티라인, 시각화, 시계열
트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

[VueJs] CKEditor 연동하기

Programming/Frontend 2020. 4. 27. 21:02
반응형
// 설치
npm i --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic

// package.json 확인
    "dependencies": {
        "@ckeditor/ckeditor5-build-classic": "^16.0.0",
        "@ckeditor/ckeditor5-vue": "^1.0.1"
    }

// template 파일 샘플
<template>
    <ckeditor :editor="editor"
              v-model="editorData"
              :config="editorConfig"
    />
</template>

<script>
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic'
    import CKEditor from '@ckeditor/ckeditor5-vue'
    
    export default {
        name: 'CKEditor',
        components: {
            ckeditor: CKEditor.component
        },
        data: () => ({
            editor: ClassicEditor,
            editorData: '<p>Content of the editor.</p>',
            editorConfig: {
                // The configuration of the editor.
                height: '500px',
                language: 'ko'
            }
        })
    }
</script>

 

팁

 언어를 한국어(ko) 로 지정을 해도 메뉴들이 여전히 영어로 나올 경우, 한국어를 직접 참조할 수 있도록 추가

import '@ckeditor/ckeditor5-build-classic/build/translations/ko';

참조 URL : https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html

반응형
블로그 이미지

BitSense

뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

Tag CKEditor, vuejs
트랙백 0개, 댓글 1개가 달렸습니다

댓글을 달아 주세요

반응형

글 보관함

달력

«   2022/05   »
일 월 화 수 목 금 토
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 31