읽기 순서를 임의로 결정하는 크롬 확장 기능을 위한 for Google Meet [React+Type Script] 만들기
22902 단어 크롬 확장ReactTypeScripttech
소재를 찾다가 좋은 기사를 발견했으니 아이디어를 빌려주세요.
고마워요🙏
※ 펙슬리는 절대 아닙니다
매주 팀 내에서 독서회와 부문별 엔지니어 윤독회를 열지만 매번 독서 순서를 정하는 것이 번거롭기 때문에 cherome 확장 기능을 만들어 참가한 멤버들을 카드를 씻은 후 리스트로 돌려준다.
또한 당사의 독서는 Google Meet에서 많이 열리기 때문에 Google Meet의 확장 기능이 될 수밖에 없습니다. 이해해 주십시오.
만든 물건
현재 Meet의 구성원을 무작위로 정렬하고 나열할 수 있는 확장 기능이 만들어졌습니다.
※ 스토어에는 공개되지 않음
여기서 공개되니까 꼭 봐주세요.
기술 선정
UI 구성이 포함되어 있어 익숙한 프레임을 사용하고자 React+Type Script를 적용했습니다.
크롬 extension을 만들 때 다음 템플릿을 사용하면 React+Type Script를 넣은 상태에서 쉽게 사용할 수 있습니다.
포장류
Chrome 확장을 읽는 유형 정의@types/chrome가 사용됩니다.
popup.tsx 및 콘텐츠script.tsx
chrome.tabs.sendMessage()
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {} )
popup 측 설치
사용자 목록 표시
사용자 일람 drawer를 표시하지 않으면 참여 멤버 이름이 있는 DOM이 생성되지 않습니다.
처음 렌더링할 때 sendMessage로 콘텐츠 만들기스크립트 옆에 이벤트 점화
참가 멤버 일람의 취득 처리
oukajinigetMemberList () 실행 일람을 통해 단추를 가져오고sendMessage,conntent를 보냅니다script 측면에서 script를 실행하고 문자열로 참가 구성원 일람을 얻습니다
가공 후view 옆에 표시하여 참가 멤버 일람표를 표시합니다
popup.tsx
const currentChromeTab = (callback: (tabId: number) => void) => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
// 現在表示しているタブを取得
const tab = tabs[0];
if (tab.id) {
callback(tab.id);
}
});
};
const getMemberList = () => {
currentChromeTab((tabId) => {
chrome.tabs.sendMessage(
tabId,
undefined, // message は不要なため undefined とする
(msg) => {
if (typeof msg === "string") {
const shuffledMembers = shuffle(msg.split(","));
setCurrentTime(new Date());
setMembers(shuffledMembers);
}
}
);
});
};
// init
useEffect(() => {
currentChromeTab((tabId) => {
// ユーザー一覧 drawer を表示させる
chrome.tabs.sendMessage(tabId, undefined);
});
}, []);
content_script 측 설치
사용자 목록drawer의 표시 판정
처음 표시될 때 사용자가 drawer를 일람하는 디스플레이 판정이 진행되며, 표시되지 않을 때 자동으로 켜집니다
참가 구성원의 이름 목록 가져오기
참가 성원명은 씨엘마이라는 학급명을 가진 덤의 자손들에게 보존되기 때문에 취득
content-script.tsx
const openAllUserDrawer = () => {
/*
* 各ボタンの aria-label 属性にラベルに表示するボタン名が格納されている
* 全てのボタンを DOM から取得して全員を表示ボタンを探す
*/
const ariaLabelElems = document.querySelectorAll("[aria-label]");
for (let i = 0; i < ariaLabelElems.length; i++) {
if (
ariaLabelElems[i].getAttribute("aria-label") === ALL_USER_BUTTON_LABEL
) {
const chatOpenButton = ariaLabelElems[i] as HTMLButtonElement;
chatOpenButton.click();
}
}
};
const getUserNameList = (sendResponse: (response?: any) => void) => {
let names: string[] = [];
const elems = document.querySelectorAll(".cylMye");
if (!elems.length) {
// .cylMye が存在しない = ユーザー一覧 drawer が表示されていない
openAllUserDrawer();
return;
}
for (let i = 0; i < elems.length; i++) {
names = [...names, findUserNameFromElm(elems[i])];
}
// 重複した名前を省く
names = Array.from(new Set(names));
sendResponse(names.join(","));
};
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
getUserNameList(sendResponse);
});
구성원의 함수를 흐트러뜨리다
이번에는 랜덤 편차를 없애기 위해낚시꾼이 간판을 뒤섞다.
알고리즘은 이런 방법을 채택했다
shuffle.ts
const shuffle = (value: string[]) => {
for (let i = value.length - 1; i >= 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[value[i], value[j]] = [value[j], value[i]];
}
return value;
};
export default shuffle;
zip 파일 생성
Giithub Actions를 사용하여 마스터 지점 push에 갈 때build+ 실행 결과를 실행합니다.zip으로 압축하여 발행에 포함합니다.yml에 기재
.github/workflows/build.yml
- name: yarn install & build
run: |
yarn
yarn build --if-present
- name: zip output
run: |
cd dist
zip release *.*
・
・
・
- name: upload Release Asset
id: upload-release-asset
uses: actions/upload-release-asset@v1
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
with:
upload_url: ${{ steps.create_release.outputs.upload_url }}
asset_path: ./dist/release.zip
asset_name: chrome-extention.zip
asset_content_type: application/zip
총결산
참가 인원을 집계할 수 있어 편리하니 꼭 사용하세요.
앞으로 공개될 때까지 해보고 싶다.
Reference
이 문제에 관하여(읽기 순서를 임의로 결정하는 크롬 확장 기능을 위한 for Google Meet [React+Type Script] 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/sota_yamaguchi/articles/a138b03e62595b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)