Preview
티스토리 블로그를 제 입맛에 맞게 꾸미기 위해 Html 편집을 통해 css를 좀 건드렸습니다.
그래서 요런 다크 한 테마의 배경 색과 레이아웃이 나올 수 있었죠.
제 글을 몇 개 읽어보면 프로그래밍 단어 / 중요 단어와 같은 단어에 아래와 같은 디자인이 적용된 걸 볼 수 있습니다.
이런 효과를 적용하기 위해서 <code> </code> 태그로 단어를 감싸줘야 합니다. 참 번거롭죠? ㅎ 그래서 만들었습니다.
안 그래도 예전부터 크롬 익스텐션을 한번 개발해보고 싶었는데 마침 잘됐다 싶었습니다.
Skills
Javascript / html / css
코드는 정말 정말 간단합니다
html 소스코드를 붙여 넣고 감싸고 싶은 키워드를 배열의 형태로 넣은 다음 감싸고 싶은 태그를 입력하면
그러니까 저 같은 경우에는
html 소스
키워드 : ['science', 'math']
태그 : code
이렇게 넣으면 저 키워드에 <code> </code> 태그가 감싸진 html 소스가 나오는 거죠. 아래에 코드를 첨부합니다.
<html>
<head>
<link href="converter.css" rel="stylesheet" />
</head>
<body>
<h1>Html Tag Wrapper</h1>
<div style="display: flex; flex-direction: column; gap: 8px; width: 300px">
<textarea
type="text"
,
id="htmlSource"
placeholder="insert html source code"
></textarea>
<input
type="text"
,
id="keywords"
placeholder="insert keywords as an array. ex) ['one', 'two']"
/>
<input type="text" , id='tag' placeholder="insert a tag name. ex)input" />
<input type="button" id="wrapBtn" value="Wrap it!"></button>
<textarea id="ta"></textarea>
</div>
<script src="converter.js"></script>
</body>
</html>//converter.js
const wrapBtn = document.getElementById("wrapBtn");
wrapBtn.addEventListener("click", () => {
const htmlSource = document.getElementById("htmlSource");
const ta = document.getElementById("ta");
const originalText = htmlSource.value;
const searchStrings = document.getElementById("keywords").value;
const tag = document.getElementById("tag").value;
const wrappedText = wrapStringsWithCodeTags(
originalText,
JSON.parse(searchStrings.replace(/'/g, '"')),
tag
);
ta.innerText = wrappedText;
});
function wrapStringsWithCodeTags(text, searchStrings, tag) {
console.log(text);
for (var i = 0; i < searchStrings.length; i++) {
var searchString = searchStrings[i];
var regex = new RegExp("(" + searchString + ")", "g");
text = text.replace(regex, `<${tag}>$1</${tag}>`);
}
return text;
}
크롬 익스텐션에 배포하는 방법은 링크 남겨두겠습니다.
https://yscho03.tistory.com/103
크롬 확장 프로그램(Chrome Extension)을 개발해보자
크롬 확장 프로그램 (Chrome Extension) 소개 Chrome Extension 이란? Chrome 브라우저의 작은 소프트웨어 프로그램이다. 활용분야 생산성 도구 웹 페이지 콘텐츠 보강 정보 집계 게임 동작방식 웹과 동일하
yscho03.tistory.com
한 가지, 말씀드릴 점은 $5를 지불하셔야 스토어에 올릴 수 있습니다. 그리고 심사도 받아야 하고요.
이렇게 간단한 프로그램도 등록해 줄지는 모르겠으나 한번 경험 삼아 올려보려고요ㅎㅎ
'개발 프로젝트' 카테고리의 다른 글
| [PyQt5] 성경 프롬프터 프로그램 (19) | 2023.11.29 |
|---|---|
| [Programmers] 숫자 카드 나누기 -Javascript (1) | 2023.10.28 |
| 아파트 매물 알리미 - NestJs / ReactJs (0) | 2023.10.14 |
| Push 서버 관리자 사이트 개발 (0) | 2023.07.06 |
| NodeJS Chat Service (0) | 2023.04.21 |
