v0.0.3

- ツイートが使用可能なとき、ツールバーのアイコンの色を変えるように
- ツイートボタン設置の判定改善

dist/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "dアニメストア ツイートボタン",
   "description": "PC版dアニメストアに、モバイル版dアニメストアと同機能のツイートボタンを追加します。",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "options_ui": {
     "page": "options.html",
     "open_in_tab": false

src/background.ts

@@ -5,7 +5,7 @@ chrome.action.onClicked.addListener((tab)=>{
   chrome.tabs.sendMessage(tab.id, {_danimebutton: 'DANIME_BUTTON_CLICKED'});
 });
 
-chrome.declarativeContent.onPageChanged.removeRules(async ()=>{
+chrome.declarativeContent.onPageChanged.removeRules(undefined, async ()=>{
   chrome.declarativeContent.onPageChanged.addRules([{
     conditions: [
       new chrome.declarativeContent.PageStateMatcher({
@@ -18,25 +18,29 @@ chrome.declarativeContent.onPageChanged.removeRules(async ()=>{
       }),
     ],
     actions: [
-      new chrome.declarativeContent.ShowPageAction(),
+      // new chrome.declarativeContent.ShowPageAction(),
       new chrome.declarativeContent.SetIcon({
-        imageData: await loadImageData('icon/32.png')
+        imageData: await createIcon()
       }),
     ],
   }]);
 });
 
-function loadImageData(url): Promise<ImageData> {
+function createIcon(): Promise<ImageData> {
   return new Promise(resolve => {
-    const canvas = document.body.appendChild(document.createElement('canvas'));
-    const context = canvas.getContext('2d');
-    const img = new Image();
-    img.onload = () => {
-      context.drawImage(img, 0, 0);
-      const data = context.getImageData(0, 0, img.width, img.height);
-      canvas.remove();
-      resolve(data);
-    };
-    img.src = url;
+    const size = 32;
+    const canvas = new OffscreenCanvas(size, size);
+    const ctx = canvas.getContext('2d');
+    // background
+    ctx.fillStyle = '#eb5528';
+    ctx.fillRect(0, 0, size, size);
+    // "d"
+    ctx.fillStyle = '#fff';
+    ctx.font = '900 26px Helvetica';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText('d', size>>1, (size>>1)+2);
+    const imageData = ctx.getImageData(0, 0, size, size);
+    return resolve(imageData);
   });
 }

src/contentScript.ts

@@ -5,7 +5,7 @@ import {
 } from './tweetContent';
 
 const tweet = () => {
-  chrome.storage.local.get({preferShareAPI: false}, async ({ preferShareAPI }) => {
+  chrome.storage.local.get({ preferShareAPI: false }, async ({ preferShareAPI }) => {
     if (preferShareAPI) {
       const text = await getTweetText();
       const url = getTweetUrl();
@@ -48,41 +48,37 @@ const buttonIconStyle = {
   margin: 'auto',
 };
 
-const confirmElement = () => new Promise((resolve, _rej) => {
-  const intervalID = setInterval(() => {
-    const playermodal = document.querySelector('modal');
-    if (playermodal) {
-      clearInterval(intervalID);
-      resolve(playermodal);
+const isTargetModal = ((record: MutationRecord) => {
+  let flag = false;
+  record.addedNodes.forEach(node => {
+    if (node.nodeName === 'MODAL' && node instanceof Element && !node.id.endsWith('LOADER') && node.className.includes('modalDialog')) {
+      flag = true;
     }
-  }, 1000);
+  });
+  return flag;
 });
 
 (() => {
   /**
-   * 各話モーダル表示時、すなわち ?partId 付きのURL移動時
-   * popstate でも onclick でもイベント発生しないため setInterval で URL を監視
+   * 各話モーダル表示時にボタンを追加
    */
-  let lastURL = null;
-  setInterval(async () => {
-    if (lastURL == document.URL) return;
-    lastURL = document.URL;
-    if (!document.location.search.includes('partId')) {
-      const button = document.getElementById(BUTTON_ID);
-      if (button) button.remove();
-    } else {
+  const observer = new MutationObserver((mutRecords) => {
+    const isModalDisplayed = mutRecords.some(isTargetModal);
+    const oldButton = document.getElementById(BUTTON_ID);
+    if (isModalDisplayed) {
+      if (oldButton) return;
       const button = document.createElement('a');
       const buttonIcon = document.createElement('i');
       button.id = BUTTON_ID;
       Object.assign(button.style, buttonStyle);
       Object.assign(buttonIcon.style, buttonIconStyle);
-      const playermodal = await confirmElement();
-      // button.href = await getTweetIntentURL();
-      // button.target = '_blank';
-      button.href = '#';
+      button.href = 'javascript:void()';
       button.onclick = tweet;
       button.appendChild(buttonIcon);
       document.querySelector('body').append(button);
+    } else {
+      if (oldButton && !document.location.search.includes('partId')) oldButton.remove();
     }
-  }, 300);
+  });
+  observer.observe(document.querySelector('body'), { childList: true });
 })();

webpack.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  mode: 'development',
+  mode: 'production',
   devtool: false,
   entry: {
     options: './src/options.ts',