wip - ポップアップからシェアすることができるように（Firefoxじゃ動かない）

alpaca-honke · Sep 19, 2023 · 2d4da08 · 2d4da08
1 parent 718d0e1
commit 2d4da08
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 21 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -13,6 +13,8 @@
     },
     "PopupTitle":{"message": "Twishare to Misskey settings"},
     "ShowUpdateLogLink":{"message": "update log and notifications"},
+    "ShareButtonLabel":{"message": "Share this page"},
+    "Settings":{"message": "Settings"},
     "InstanceNameFormLabel":{"message": "Enter the server domain you want to share with. (Default is misskey.io .)"},
     "InstanceNameFormPlaceHolder":{"message": "Enter the domain"},
     "ShareButtonToggleLabel":{"message": "Display a share button in the lower right corner on non-Misskey sites"},

diff --git a/_locales/ja/messages.json b/_locales/ja/messages.json
@@ -13,6 +13,8 @@
     },
     "PopupTitle":{"message": "Twishare to Misskeyの設定"},
     "ShowUpdateLogLink":{"message": "更新内容/お知らせはこちら"},
+    "ShareButtonLabel":{"message": "現在のページをシェア"},
+    "Settings":{"message": "設定"},
     "InstanceNameFormLabel":{"message": "共有先のサーバー名(URLのhttps://のあとに続く文字列)を設定してください。デフォルト値はmisskey.ioです。"},
     "InstanceNameFormPlaceHolder":{"message": "共有先のサーバーのURLを入力"},
     "ShareButtonToggleLabel":{"message": "Misskey系SNS以外のページで画面右下にシェアボタンを表示"},

diff --git a/js_and_css/allpages.css b/js_and_css/allpages.css
@@ -13,6 +13,10 @@
 	border: none !important;
 	z-index: 2147483647 !important;
 }
+#_twishare_to_misskey_share:hover{
+    background-color: #259500 !important;
+    cursor: pointer !important;
+}
 #_twishare_to_misskey_share_img{
 	height: 100% !important;
 	margin: 0 !important;

diff --git a/js_and_css/allpages.js b/js_and_css/allpages.js
@@ -4,9 +4,15 @@ if (typeof browser === 'undefined') {
     browser = chrome;
 }
 
+//ポップアップから、シェアボタンが押されたときに通知が来る
+browser.runtime.onMessage.addListener((request) => {
+    if (request.content === "share"){
+        buttonClicked();
+    }
+});
 setButtonIfNeeded();
 
-//以下全部関数定義（処理は以上一行）
+//以下全部関数定義
 
 async function setButtonIfNeeded() {
 	if (await whetherSetButton()) {

diff --git a/options/options.css b/options/options.css
@@ -22,6 +22,33 @@ h1{
 #installed:hover{
 	text-decoration: underline;
 }
+button{
+    display: table-cell;
+    background-color: #33a300;
+    color: #ffffff;
+    height: 50px;
+    width: 300px;
+    border-radius: 25px;
+    margin: 5px;
+    border: none;
+}
+button:hover{
+    background-color: #259500;
+    cursor: pointer;
+}
+button>img,
+button>span{
+    display: inline-block;
+    vertical-align: middle;
+}
+button>span{
+    font-size: 1.2em;
+    font-weight: 300;
+}
+h2{
+    font-size: 1.2em;
+    font-weight: 500;
+}
 .description{
 	color: #666;
 }

diff --git a/options/options.html b/options/options.html
@@ -9,26 +9,35 @@
 		<div>
 			<h1><img src="../assets/icon.png" id="icon" /></h1>
 			<span id="version">v[バージョン番号] </span><a id="installed">更新内容/お知らせはこちら</a>
-			<p class="description" id="instance_name_form_label">共有先のサーバー名(URLのhttps://のあとに続く文字列)を設定してください。デフォルト値はmisskey.ioです。</p>
-			<input type="text" placeholder="共有先のサーバーのURLを入力" id="instance_name" />
-			<div id="checkboxes">
-				<div>
-					<label for="button_visibility">
-						<input type="checkbox" id="button_visibility" class="check" />
-                        <span id="share_button_toggle_label">Misskey系SNS以外のページで画面右下にシェアボタンを表示</span>
-					</label>
-				</div>
-				<div>
-					<label for="button_visibility_on_misskey">
-						<input type="checkbox" id="button_visibility_on_misskey" class="check" />
-                        <span id="share_button_on_misskey_toggle_label">Misskey系SNS上で右下にシェアボタン表示</span>
-					</label>
-				</div>
-			</div>
-			<p class="description" id="share_button_hide_form_label">その他、右下のボタンを表示させないドメイン(URLの「https://」のあとから「/」まで)を入力<br>（スペース区切りで複数指定）</p>
-			<input type="text" placeholder="ドメインをスペース区切りで入力" id="sites_to_hide_button" />
-            <p id="save_status"></p>
+            <div class="share">
+                <button id="share_button">
+                    <img src="../assets/share.png" height="45px">
+                    <span id="share_button_label">現在のページをシェア</span>
+                </button>
+            </div>
+            <div class="settings">
+                <h2 id="settings_title">設定</h2>
+                <p class="description" id="instance_name_form_label">共有先のサーバー名(URLのhttps://のあとに続く文字列)を設定してください。デフォルト値はmisskey.ioです。</p>
+                <input type="text" placeholder="共有先のサーバーのURLを入力" id="instance_name" />
+                <div id="checkboxes">
+                    <div>
+                        <label for="button_visibility">
+                            <input type="checkbox" id="button_visibility" class="check" />
+                            <span id="share_button_toggle_label">Misskey系SNS以外のページで画面右下にシェアボタンを表示</span>
+                        </label>
+                    </div>
+                    <div>
+                        <label for="button_visibility_on_misskey">
+                            <input type="checkbox" id="button_visibility_on_misskey" class="check" />
+                            <span id="share_button_on_misskey_toggle_label">Misskey系SNS上で右下にシェアボタン表示</span>
+                        </label>
+                    </div>
+                </div>
+                <p class="description" id="share_button_hide_form_label">その他、右下のボタンを表示させないドメイン(URLの「https://」のあとから「/」まで)を入力<br>（スペース区切りで複数指定）</p>
+                <input type="text" placeholder="ドメインをスペース区切りで入力" id="sites_to_hide_button" />
+                <p id="save_status"></p>
+            </div>
 		</div>
-		<script src="options.js"></script>
+		<script src="options.js""></script>
 	</body>
 </html>
diff --git a/options/options.js b/options/options.js
@@ -7,6 +7,8 @@ if (typeof browser === 'undefined') {
 //表示をロケールによって変えるjs
 document.getElementById('version').innerHTML = 'v' + browser.i18n.getMessage('Version') + ' ';
 document.getElementById('installed').innerHTML = browser.i18n.getMessage('ShowUpdateLogLink');
+document.getElementById('settings_title').innerHTML = browser.i18n.getMessage('Settings');
+document.getElementById('share_button_label').innerHTML = browser.i18n.getMessage('ShareButtonLabel');
 document.getElementById('instance_name_form_label').innerHTML = browser.i18n.getMessage('InstanceNameFormLabel');
 document.getElementById('instance_name').placeholder = browser.i18n.getMessage('InstanceNameFormPlaceHolder');
 document.getElementById('share_button_toggle_label').innerHTML = browser.i18n.getMessage('ShareButtonToggleLabel');
@@ -15,12 +17,19 @@ document.getElementById('share_button_hide_form_label').innerHTML = browser.i18n
 document.getElementById('sites_to_hide_button').placeholder = browser.i18n.getMessage('ShareButtonHideFormPlaceHolder');
 
 document.addEventListener('DOMContentLoaded', Load);
+document.getElementById('share_button').addEventListener('click',share);
 document.getElementById('instance_name').onkeydown = () => {Save();};
 document.getElementById('button_visibility').addEventListener('change', Save);
 document.getElementById('button_visibility_on_misskey').addEventListener('change', Save);
 document.getElementById('sites_to_hide_button').onkeydown = () => {Save();};
 document.getElementById('installed').addEventListener('click',showInstalled);
 
+async function share() {
+    //シェア画面に遷移するのはallpages.jsの役割なので託す
+    const tabs = await browser.tabs.query({active:true, lastFocusedWindow:true});
+    const tabId = tabs[0].id;
+    browser.tabs.sendMessage(tabId,{content:"share"});
+}
 function Save() {
     //呼び出し後速攻実行されると不具合が出ることがある
     setTimeout( () => {