Top page  1/36

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

今どきの文字コード変換

CATEGORY未分類
EUC で URI エンコードされた文字列を javascript で使いたい という件。 今どきは、TextDecoder を使うらしい。

fetch と組み合わせると、UTF-8 じゃないページでもデータを扱えるということらしい。

async function fetch_and_decode(url) {
    const response = await fetch(url, {credentials: "include", redirect: "follow"});
    const responseURL = new URL(response.url);
    
    const contentType = response.headers.get("Content-Type");
    if (contentType === null) {
        throw new Error(`Content-Type Error: ${contentType}`);
    }
    const mimeType = new MIMEType(contentType);
    if (!mimeType.isHTML() && mimeType.essence !== "application/xhtml+xml") {
        throw new Error(`Content-Type Error: ${contentType}`);
    }
    
    const ab = await response.arrayBuffer();
    const charset = mimeType.parameters.get("charset") || document.characterSet;
    const textDecoder = new TextDecoder(charset);
    const responseText = textDecoder.decode(ab);
    
    return {responseURL, responseText};
}
※CORS の問題はあるとしても。

javascript

uBO test

CATEGORY未分類

Example extensions - Mozilla

CATEGORYjavascript
Example extensions - Mozilla | MDN
  1. annotate-page
    • サイドバー
    • ローカルストレージ(browser.storage.local)
  2. apply-css
    • page action(アドレスバーの右側にあるボタン)
    • ページへのスタイルの追加・削除
  3. beastify
    • ツールバーのポップアップから、コンテンツへの通信
  4. bookmark-it
    • ブックマークの追加・削除。
  5. borderify
    • URL のパターンマッチングによるコンテンツスクリプトの直接起動
  6. chill-out
    • 遅延や定周期の実行を行う browser.alarms
    • ロケーションバーに入る browser.pageAction
  7. commands
    • ショートカットキーを定義する browser.commands
  8. context-menu-copy-link-with-types
    • 右クリックメニューへの項目追加
    • クリップボードへのデータ設定
  9. menu-demo
  10. contextual-identities
  11. cookie-bg-picker
  12. dynamic-theme
  13. embedded-webextension-bootstrapped
    • addon migration. legacy -> hybrid -> pure webextension
  14. embedded-webextension-sdk
    • addon migration. legacy -> hybrid -> pure webextension
  15. emoji-substitution
  16. eslint-example
  17. favourite-colour
  18. firefox-code-search
    • アドレスバーになんか入れて候補を出すやつ(browser.omnibox)
  19. forget-it
  20. google-userinfo
    • OAuth2 authorization (google) - browser.identity
    • options_ui
  21. history-deleter
  22. imagify
    • web_accessible_resources and browser.extension.getURL
    • sidebar_action
    • drag and drop Image File
  23. latest-download
  24. list-cookies
  25. mocha-client-tests
  26. native-messaging
    • browser.runtime.connectNative - ローカルのプロセスと通信する
      2017-10-13 時点で標準入出力しかサポートしてない
      app manifest json は、置き場所が決まってたり(linux、Mac OS X)、レジストリで指定したり(Windows)する。
      runtime.sendNativeMessage() という API もある(ショートカット?)。
  27. navigation-stats
    • browser.webNavigation - 情報が取れるだけ、かな?
    • browser.storage.local
  28. notify-link-clicks-i18n
    • コンテンツスクリプトからバックグラウンドへの通信
    • 国際化のための browser.i18n
    • 通知のための browser.notifications
  29. open-my-page-button
    • ツールバーのクリックのアクション
    • 新規タブで、extension のリソース(html)を表示(browser.tabs.create)
  30. page-to-extension-messaging
  31. permissions
    • browser.permissions
    • optional_permissions
  32. proxy-blocker
    • PAC の登録
    • browser.storage.onChanged
    • options_ui
  33. quicknote
    • browser.storage.local の読み書き
  34. react-es6-popup
  35. selection-to-clipboard
    • URL のパターンマッチングによるコンテンツスクリプトの直接起動
  36. stored-credentials
  37. tabs-tabs-tabs
  38. theme-switcher
  39. themes
  40. top-sites
    • New Tab のページを置き換える chrome_url_overrides
    • New Tab ページの「トップサイト」を表す browser.topSite
  41. user-agent-rewriter
    • ポップアップからバックグラウンドの関数呼び出し(sendMessage じゃない)
    • http リクエストの Hook (browser.webRequest
  42. webpack-modules
  43. window-manipulator
    • ウィンドウの操作(browser.window)

Firefox javascript WebExtension

Yes / No

CATEGORY未分類

画像に色をつけて、くりんくりん回すやつのコード

CATEGORYjavascript

こちらで使ってる、 モノトーンっぽい画像を赤くしている javascript のコード。
canvas を使ってる。


(function() {
    function insert_red_icon(img, target) {
        // change color with canvas
        // https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas
        let canvas = target.appendChild(Object.assign(document.createElement("canvas"), {
            width: img.width,
            height: img.height,
        }));
        let ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        let imageData = ctx.getImageData(0, 0, img.width, img.height);
        let data = imageData.data;
        for (let i = 0 ; i < data.length ; i += 4) {
            if (data[i] != 0) {
                data[i]     = 255;      // red
//              data[i + 1] =           // green
//              data[i + 2] =           // blue
//              data[i + 3] =           // opacity
            }
        }
        ctx.putImageData(imageData, 0, 0);
    }

    window.addEventListener("DOMContentLoaded", function() {
        document.getElementById("x20170627-0").appendChild(Object.assign(document.createElement("img"), {
//          src: 'https://cdn-ak2.f.st-hatena.com/images/fotolife/a/a-kuma3/20170627/20170627015340.png',
            src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAXEAYAAACqhuhtAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAAAbAAAAFwB5QMvHAAAECUlEQVRYw92XbUhTURjHH++9Tdld21y0trAXS4ygaMYsaVhrhb1IKcKSKIlIpFGXKKSgIKEPRfghCEL6JEQfIiKyD40oadZyG26wohccphS6EJfrbl6bk+7tw+NhNlkvdLKX/5fnnmfn3PP8zrnn7HnyFEVRFAWoaXw8kYjHGQZbW7ag1evpzTBd6TRaj0et1moLC0WR/MLRBdq9GxeqoyMS6et78wbg06dUKpWij8SyLMuyACUly5YVF6MvHj99GgEvXMiTJFEcHf3VafLyEEiWr15tb792DeD160gkEqEPlC29XqfT6QCamwXhyBGAuXM1Gp43mxk6r7fb+/r6+wcGZg+I6ONHURRFAK/X5/P7idflogRmNicSyWQyOXtA2RobkyRJIq3587POGMuiPXQIrcXytT+XSkqWLFm0qKgIoL6+rq62NndPWf78WZYBBgbevXv7FiAUCoefPwegfYlNgZWWyrIsy3Jvr98fDIZCAEND0ej79wDopzchw7AswwCsXFlaumIFwP79e/Y4nQBnz54/f/EiAK2dnwJzuTo67t1zuwE8Hq+3u5seSC55vT5fIAAwMhKLxWIANltFxbp1AG73gwednRQWEE1TU3d3INDT8/uBshUMhsPhMIDVarGQD5+GpsDU6nR6cnJycvbBJEmSxscBeJ7n1WrqYP+f/hswlUqlUqlIS5L+ebA5cziO4wDWr7da164l3vZ2arnir4rjMECLZfXqVasAnj178eLly5n/bwZDYaFeD1BeXlZWVpbpbzIZjUbjpUuYK7569dfsGK78xMTBg/v27d1765YgNDU1NgKYTAsWGI2ZfqKYSCSTABUV5eVWK8DChWazybRmDQKdOEH6/TVgqFQKA3Q6ly8vLl669OjRU6eOHRMEgJqanTu3bwfgOMzqHz70eLq6yDiXK/tNU2AjIxoNz/P87KPMm2cwGAyk1d9PnhDwyhWGYRiG0Wgcjo0bKytbW8+caW4+fhxgYiKdTqdJEnz4MJZNRUVZYG1ttbXV1Tt2AOCLfj8QOfRVVQ6H3U68bW3Z/RBQktCePKnTabVarc3W0FBf73Rev87z0zckFiNPWfXY5csfPoyOxuOCMDgYjUajAKkUFoo3bty+fefOzNwRDy2Aw7FpU2UlQH7+9Gt3plgWF27xYkyaMVBy6DNn5EeFO1VQgOMzJW2OQpPUpAcOdHZ2dT1+3NJy967bff9+JvBt27ZudTgA7HabbcMGUtEKAo4bHv52OCTH6enBgIaGaH8ROa774WFMsVpaHj168sTrzVyrdXW7dlVXk5VubcX+586hHRv73oQIQhvjB4Q7WFPj9/t8T58qSigUDAYCioL+mzfRbt78B0KjC4i2qupPx/Oz+gLtlsxmI/7mOgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNy0wNi0yN1QwMTo1Mzo0MCswOTowMBUNjZoAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTctMDYtMjdUMDE6NTM6NDArMDk6MDBkUDUmAAAAF3RFWHRwbmc6Yml0LWRlcHRoLXdyaXR0ZW4ACKfELPIAAAAASUVORK5CYII=',
            onload: function() {
                insert_red_icon(this, document.getElementById("x20170627-1"));
                insert_red_icon(this, document.getElementById("x20170627-2"));
            },
        }));
    });
})();

参考にしたのは、MDN の「Canvas とピクセル操作 - ウェブデベロッパーガイド | MDN」。

画像はページと同じドメインじゃないと、画像を変更するときにセキュリティチェックに引っかかる。

SecurityError: The operation is insecure.
大抵のブログはファイルサーバが別ドメインなので、data URI scheme を使ってる。



画像をくりんくりん回しているのは、この css 。

/* rotate notification icon when active */
#x20170627-2 {
    display: inline-block;
    animation: my-icon-rotate 2s linear infinite;
}
@keyframes  my-icon-rotate {
    0% { transform: rotateY(0deg); }
    30% { transform: rotateY(360deg); }
    100% { transform: rotateY(360deg); }
}

javascript

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。