リンクをコピペするbookmarklet、はてブのentryページ開くbookmarklet作った

ie, safari, chrome用にリンクをコピペするbookmarklet、はてブのentryページ開くbookmarklet作った。

Bookmarklet of quietmole

目新しい物はなく、よくあるbookmarklet。iphoneやandroidでコピペしやすいように、window.promptでコピペ文字列が出てくるのが、チョット工夫したところ。

firefoxはcspでbookmarkletが全部撃墜されるので、そのうちaddon 作るかも。
firefoxのweb extensions | 實松アウトプット

リンクをコピペするのは、text, markdown, htmlの3種類。範囲選択してる場合はその部分をリンク文字列に使う。デフォルトはページのタイトル。

はてぶentryページは、canonical url > current url の優先順で、あったら、このページに飛びますか、ok/cancel。okを押したら、別ページにentryページを開く。

cspだと外部jsダメなのかー xhrダメなのかーと試行錯誤した。あと、xhrのonloadにwindow.open書いてもデフォルト設定のブラウザにブロックされちゃうとか。もうすぐ2016年?知ってるよ。

bookmarklet使えば、どのブラウザでも動くし、最高じゃない?と思ったがCSPにブロックされて全然ダメだった

便利なchrome extensionを使うたびに、chromeにロックインされていく。コレと同じ機能を持つfirefoxのaddonは〜とかダルい。
便利にchromeを使っているが、iosやandroidのchromeではchrome extensionが使えない。コレはきびしい。
ios safariでは、ios appに付属させる形でios safari用のextentionが配布できるようだ。要お布施。

各ブラウザのextention探すのもダルいのに各ブラウザのextention作るわけ無いだろ…。firefoxでchrome extentionとほぼ同じ形式で作れるようになるらしいけど調べてない。

greasemonkey系のでもいいけど、自動で適用しなくていいのなら、bookmarkletで良いのでは?
context menuに追加系のは多少だけど普段使うwebが遅くなりそうで避けたい。
ゴニョゴニョごニョーーっと処理をやって、最後にwindow.promptで出力すれば、クリップボードにアクセスしなくていいし、ユーザーに自分でコピーしてもらえばいいし、最高じゃない?と思った。

そんなに甘くなかった。

$ curl --head https://github.com/rackt/react-router
(snip)
Content-Security-Policy: default-src *; script-src assets-cdn.github.com; object-src assets-cdn.github.com; style-src 'self' 'unsafe-inline' 'unsafe-eval' assets-cdn.github.com; img-src 'self' data: assets-cdn.github.com identicons.github.com www.google-analytics.com checkout.paypal.com collector.githubapp.com *.githubusercontent.com *.gravatar.com *.wp.com; media-src 'none'; frame-src 'self' render.githubusercontent.com gist.github.com www.youtube.com player.vimeo.com checkout.paypal.com; font-src assets-cdn.github.com; connect-src 'self' live.github.com wss://live.github.com uploads.github.com status.github.com api.github.com www.google-analytics.com api.braintreegateway.com client-analytics.braintreegateway.com github-cloud.s3.amazonaws.com; base-uri 'self'; form-action 'self' github.com gist.github.com

なるほど。

サーバー側がこう設定してある時に

外部ファイル読み込まないbookmarklet

javascript:()(function(){window.alert('foo');})

chrome46 foo のalert出る
firefox42 bookmarklet動かない
ios8 safari fooのalert出る
android5.1 chrome fooのalert出る
android5.1 firefox bookmarklet動かない

外部ファイル読み込むbookmarklet

例は省略

chrome46 csp違反で外部ファイル読み込めない
firefox42 bookmarklet動かない
あとは確認してない。

もちろんcsp設定していなければいろいろ動くが、使ってみるまでわからないのはきび
しいし、どのページでも動かしたい。

Which Browsers Can You Run Userscripts In, and How? | mturkgrind

外部ファイル使わないbookmarkletは更新が面倒。
あとnpm moduleを使って、browserifyで固めて、とか普通にやりたい。

  • desktop/laptop
    • firefox
      • greasemonkey
      • addon
    • chrome
      • tampermonkey
      • chrome extension
    • safari
      • tampermonkey for safari
      • extension
    • ie
      • greasemonkIE
      • addon
  • ios
    • safari
      • extension
  • android
    • firefox
      • greasemonkey(?) android41に入らない…
      • addon

上記サイトから引用するとこれぐらいなのかなあ。選択肢は。悲しい結末だった。
craete link 系のと はてブ数表示->はてブページにジャンプとevernoteにclipぐらいをお手軽にやりたいだけなんだけど。

Ship “Toggle Monochrome”

I launched Toggle Monochrome Bookmarklet.

toggle-monochrome

Several days ago, below entry became popular in Japan:
色を色で見ないで|1 pixel|サイバーエージェント公式クリエイターズブログ

This article said “Lightness is important. Association each items is also important.”. I wrote Toggle Monochrome, this is easy to check web page as grayscale. I confirmed this on chrome 33.

Project page:
toggle-monochrome

JUSTBLOGエントリ編集bookmarklet

自分のJUSTBLOGの個別ページを開いている状態から当該エントリの編集画面に一発ジャンプするbookmarkletを書いてみました。ただし、コメントフォームからentry-idを拾っているので、コメントをオープンにしていないエントリでは使えません。(また、改行してありますが実際は一行です。)

javascript:(function(){var%20id=document.getElementsByName(‘entry_id’).item(0).value;
location.href=’https://app.justblog.jp/t/app/weblog/post?__mode=edit_entry&id=’+id+’&blog_id=BlogID‘})();

JUSTBLOGエントリ編集

これをお気に入りに入れたあとBlogIDを自分のBlogIDの数字に書き換えてください。BlogIDはエントリのソースをblog_id=で検索してもいいですし、ログイン後の管理画面のURLからもわかります。

このbookmarkletが出来るまでの経緯は以下
クイック編集bookmarklet欲しい, クイック編集bookmarklet欲しい(2), クイック編集bookmarklet欲しい(3), クイック編集bookmarklet欲しい(4)

クイック編集bookmarklet欲しい(4)

クイック編集bookmarklet欲しい
クイック編集bookmarklet欲しい(2)
クイック編集bookmarklet欲しい(3)の続き。

コメント欄がoffでも動くものを作ろうとgetElementsByClassName()やgetElementsByClass()を使うことにする。

やること。

class="entry" のdivのidを取得。複数あったら一個目。そのidを-で分割して二個目の配列を取得。それをURLに代入。

と思ったけれどclassをゲットする関数から組み込まなきゃいけないので、これ文字数制限越えちゃうんじゃないか?と思って中断。自分IEなもんで。

javascript:(function(){var%20eid=document.getElementsByName(‘entry_id’).item(0).value;location.href=’https://app.justblog.jp/t/app/weblog/post?__mode=edit_entry&id=’+eid+’&blog_id=36374′})();

コメントフォームからentryid拾って出来たー

クイック編集bookmarklet欲しい(3)

クイック編集bookmarklet欲しい
クイック編集bookmarklet欲しい(2)の続き。

javascript:(function(){var%20id=location.href.split(‘id="entry-‘)[1].split(‘"’)[0];location.href=’https://app.justblog.jp/t/app/weblog/post?__mode=edit_entry&id=’+id+’&blog_id=36374′})();

なんとなく継ぎ接ぎしてみたけど動かない。

またあとで

(追記 2007.03.22)
ねぼけてました。URLから取得じゃなくてページ内からDOMで取得しないといけないのに。何やってんだか。

クイック編集bookmarklet欲しい(2)

クイック編集bookmarklet欲しい の続き。

無駄な汎用性は要らないかな。blogidなんてそうそう変わるものじゃないし。複数ブログ持ちとか乗換えとかそういう人はそのつど自分で書き換えればいい。

うちのblogidは36374なのでソースの
<div class="entry" id="entry-7301745">
から数字拾って
https://app.justblog.jp/t/app/weblog/post?__mode=edit_entry&id=%5B0000000%5D&blog_id=36374
この[]にその数字を入れるjavascriptを書けばいい

ソースの中から拾い上げるとすると変なところで実行したり誤認識したりなんなりの時の対策が必要そうな気が。まあいっか。

ひとまずここまで。

クイック編集bookmarklet欲しい

JUSTBLOG公式にクイック投稿の bookmarklet があります。
でもクイック投稿だけじゃ足りなくて、パーマリンクを表示した画面で一発で編集画面に飛ぶ bookmarklet ほしいです。

編集画面から見るに blogid と entryid が取得できればブックマークレット作れそうな感じ。

でもってパーマリンク開いてソースを見ると中に
<link media="handheld" href="http://mobile.justblog.jp/t/typecast?__mode=individual&amp;blog_id=aaaaa&amp;id=bbbbbbb&amp;user_id=cccccc&quot; rel="alternate" />
って携帯用のリンクがあるのでここから blogid と entryid 拾って
https://app.justblog.jp/t/app/weblog/post?__mode=edit_entry&id=bbbbbbb&blog_id=aaaaa
という編集画面の URL に入れるの書けばいいのかな。

でも javascript や bookmarklet の仕様がよくわからないので危険なもの書いちゃいそう。汚染とかよくわかんないのです。 ということでここまで。