편리한 TweetDeck 뷰어를 만들어 보았습니다.
그래서 작업을 방해하지 않고 TweetDeck을 보는 Viewer를 만들어 보았습니다.
본체는 GitHub/mini-deck에 둡니다.
이게 뭐야?
짹짹 TweetDeck를 항상 맨 앞에 표시하는 앱입니다.
(주의) 현재는 macOS 만 지원합니다.
특징
사용법
앱 버전
GitHub/Releases 에서 zip 다운로드
CLI 시작 버전
git clone 합니다 npm install에서 필요한 패키지를 설치합니다.npm start 에서 시작! 어떻게 했니?
TweetDeck 표시
TweetDeck 자체는 Webview에서 표시하고 있습니다.
index.html
<body>
<div id="wrapper">
<webview
src="https://tweetdeck.com/">
</webview>
</div>
</body>
창의 다양한 설정
그 이외의 윈도우 설정은 기본적으로 모두
index.js 로 설정하고 있습니다.See: Electron | Browser Window
index.js
new BrowserWindow({
// 中略
width: 400,
height: 200, // サイズを確定
frame: false, // フレームを消す
alwaysOnTop: true, // 常に最前面に表示
titleBarStyle: 'customButtonOnHover', // ボタンを隠す
});
약간의 궁리
TweetDeck의 링크를 클릭했을 때 Chrome과 같은 브라우저에 표시하려면
openExternal(url)를 사용하십시오.See: Qiita | Electronn에서 링크를 열 때 외부 브라우저에서 열기
main.js
function openExternalUrl(event){
const url = event.url;
if (url.startsWith('http://') || url.startsWith('https://')) {
shell.openExternal(url);
}
};
사실 Electron의 Frameless Window는 기본적으로 드래그가 제한되어 있습니다. 따라서 CSS 측에서 드래그를 허용해야 합니다.
See: Electron | Frameless Window#Draggable region
style.css
body{
/* 中略 */
-webkit-app-region: drag;
}
참고
Reference
이 문제에 관하여(편리한 TweetDeck 뷰어를 만들어 보았습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/blue0513/items/fcab7367f8b765764c12텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
