스프레드시트에서 행을 강조 표시하는 확장 기능이 공개되었으므로 수행한 사항을 요약해 보십시오.
이곳의 확장 기능은 크롬 사이트와 Firefox Add-ons에서 공개된다.가능하면 사용하세요!
만들게 된 계기.
Google 스프레드시트에서 현재 셀 행을 강조 표시하려는 방법을 조사했습니다.
그러나 워크시트 내용을 개작하는 방법만 찾을 수 있고 다른 사람들도 이용하는 공동 편집표는 개작하기 어려워 수리하지 않는다.
내가 확장 기능을 만들면 해결할 수 있을 것 같아서 먼저 조사해 보자.
확장 정보
타입
확장 기능은 HTML+CSS+JS+ 이미지 등으로 구성됩니다.
확장 가능한 기능은 몇 가지 유형이 있다
이번에는 콘텐트 스크립트와 브라우저 액션이 만들었다.
manifest.json
이러한 설정은 파일
manifest.json에서 관리합니다.확장된 이름, 설명, 실행에 필요한 권한 등도 파일에 설명됩니다.
샘플은 아래와 같다.상세한 상황은 MDN에 기재되어 있는데, 나는 여기서 필요한 설정을 기술하는 것이 비교적 좋다고 생각한다.
manifest.json
{
"name": "extension sample",
"description": "...",
"version": "0.1",
"manifest_version": 2,
"icons": {
"48": "images/icon48.png",
},
"background": {
"scripts": ["scripts/background.js"],
"page": "pages/background.html"
},
"content_scripts": [
{
"exclude_matches": ["*://developer.mozilla.org/*"],
"matches": ["*://*.mozilla.org/*"],
"js": ["scripts/content.js"]
}
],
"browser_action": {
"default_popup": "pages/popup.html"
},
"permissions": ["storage"],
}
Message passing
스크립트 간에 메시지를 보내고 받으려면
runtime.sendMessage,runtime.onMessage.팝업 내 버튼을 클릭한 뒤 백그라운드 페이지에 정보를 알리는 것이 구체적인 용도다.
popup.js
const button = document.getElementById('button')
button.addEventListener('click', () => {
chrome.runtime.sendMessage({ message: 'test' }, (response) => {
console.log(response.message) // -> ok
})
})
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
console.log(request.message) // -> test
sendResponse({ message: 'ok' })
})
sendMessage에서 임의의 대상을 발송하거나 응답을 받을 수 있다.WebExtension API
확장은 브라우저 기능(탭 및 스토리지 장치 등)을 사용할 수 있는 API를 제공합니다.
API의 일람표는 여기서 확인할 수 있다.
사용하는 API는
manifest.json의 permissions에 기재되어야 합니다.다국어 지원
i18n을 이용하여 다중 언어 대응을 할 수 있다.
언어 레이블 지정
_locales/${言語タグ}/messages.json 및 en 등의 기본 로켈을 준비ja하고 설정하기만 하면 됩니다.다음
messages.json을 준비하신 후en/messages.json
{
"extensionDescription": {
"message": "Description of the extension."
}
}
{
"extensionDescription": {
"message": "拡張機能の説明文です。"
}
}
default_locale에서 기본적으로 표시되는 언어 레이블을 지정합니다.수치
__MSG_${メッセージの名前}__를 지정하면 사용자 환경의 정보를 표시할 수 있습니다.manifest.json
{
...
"default_locale": "en",
"description": "__MSG_extensionDescription__",
...
}
content.js
const message = chrome.i18n.getMessage('extensionDescription')
console.log(message)
동작 확인
Chrome의 확장 요약(chrome://extensions/)에서 [개발자 모드]를 ON으로 설정하고 [패키지되지 않은 확장 기능 읽기]에서 작업 디렉토리를 선택합니다.
즉시 확장 기능을 추가하여 동작을 확인할 수 있습니다.
코드 업데이트를 반영할 때, 이 화면에서 확장 기능을 업데이트해야 합니다.
공개까지의 절차.
Chrome 웹 페이지
개발자 등록
Chrome 웹 사이트 개발자 로그인부터.
등록 수수료는 5Google 선생님이 부담합니다.💰만들다
결제 방법은 신용카드밖에 없어요.
프로젝트 등록
개발자 대시보드가 표시되면 확장 기능이 요약된 ZIP 파일이 오른쪽 위의 새 항목 단추에서 업로드됩니다.
정보를 입력하다
확장 설명, 아이콘 이미지, 캡처 등을 등록합니다.
다언어화 시 각 언어에 대한 설명 등을 입력할 수 있다.
프라이버시 항목도 입력 필요
확장된 용도와 권한을 입력하는 것은 무엇을 위한 것입니까?
과도한 권한과 집행 범위를 지정하면 심사에 시간이 걸린다.
검열
검토를 위해 보내기 버튼에서 신청합니다.
심사 합격 후 자동 공개 발송을 선택했다.
회신을 받은 경우 이유는 메일로 발송됩니다.
처리하고 신청할게요.
공개한다
자동 공개를 선택한 경우 심사 합격 시점에 공개한다.
대시보드를 확인한 후 상태는 공개됨🎉
Firefox Add-ons 편
Firefox의 확장 기능은 크롬과 호환되기 때문에 크롬의 확장 기능을 수행할 수 있는 변경은 드물다.
이번에 Firefox
chrome.*의 지원 덕분에 코드가 바뀌지 않고 확장 기능을 실현했다.그렇게 크롬 사이트에 올리는 확장 기능을 신청해 보세요.
여담:
browser.* 형식으로 쓰고, 크롬도 움직일 수 있는 polyfill을 준비했다.크롬, Firefox용 확장 기능을 동시에 제작할 때 사용하는 것이 좋다.좀 쓰고 싶어요.
계정 등록
Firefox 계정이 있으면add-on 등록이 가능합니다.
아던 개발 센터 오른쪽 위에 있는 확장 기능 등록 또는 관리에서 로그인합니다.
매크로 등록 로드
크롬처럼 ZIP 파일을 업로드합니다.
자동적으로 검증을 시작하여 사전에 문제를 검사하다.
외부에서 JS 라이브러리를 읽었는데 이게 NG가 난 것 같은데...(Chrome의 심사는 OK)
만약 모두 로컬에서 수정을 끝낸다면, 검사는 통과될 것이다.
버퍼 메모리 등을 사용할 때 원본 코드를 제출해야 합니다.
이번에는 사용하지 않고 그대로 진행됐다.
정보를 입력하다
확장된 이름과 설명 등을 입력하고 버전을 등록하면 자동으로 심사를 시작합니다.
이후 크롬과 마찬가지로 언어별 정보를 입력하거나 캡처에 로그인할 수 있다.
공개한다
메일에 공개된 사실을 알리다.
대시보드를 확인한 결과 인증됨🎉
최후
끝까지 봐주셔서 감사합니다.🙇
확장 기능의 기본부터 대략적으로 정리된 기사까지 참고가 됐으면 좋겠습니다.
개발이 간단하니 확장 기능의 제작에 도전해 보세요!
Reference
이 문제에 관하여(스프레드시트에서 행을 강조 표시하는 확장 기능이 공개되었으므로 수행한 사항을 요약해 보십시오.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/matsu7089/articles/googlesheets-row-highlighter텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
