CSSにJavaScriptを埋め込む #JavaScript #CSS

• Firefox
• Google Chrome
  • Tampermonkey

FirefoxのuserContent.cssをGoogle Chromeと共有したい。

Tampermonkeyからローカルファイルを読み込めたら簡単なんだけど、どうやら最近のChromeだとセキュリティ的に難しそう。 ローカルファイルを読む方法として

• Google Chromeを --allow-file-access-from-files で起動する
• ローカルにウェブサーバーを立てる

などが挙げられるが、どちらもなんか嫌だった。

いろいろ試してみたところ、 // @require file:///Users/robario/.firefox/chrome/userContent.css でローカルファイルをJavaScriptファイルとして読み込めることがわかった。 （拡張の設定からTampermonkeyの "ファイルの URL へのアクセスを許可する" を有効にする必要がある）

なのであとはJavaScriptとして実行できるようにし、userContent.cssの中身を変数に格納できればいけそう。

コメントアウト解釈

• JavaScriptのコメントアウトは // ... と /* ... */
• CSSのコメントアウトは /* ... */

なので工夫すれば一つのファイルに両方埋め込める。 CSSから隠したいJavaScript部分を /* ... */ で隠し、JavaScriptからはその部分が実行できるようにコメントアウトをコメントアウトしてしまえば良い。

基本形はこの形。

//*
;
//*/{}

インラインコメントが有効なJavaScriptからは

;

/

    {}

これにJavaScriptのtemplate stringを組み合わせれば変数に格納できる。

//*
const css = `*/{}
html {}
//*`.replace(/^[*][/][{][}]/, '').replace(/[/][/][*]$/, '');
console.log(css); // "html {}"
//*/{}

JavaScriptとして解釈すると

   
const css = `*/{}
html {}
//*`.replace(/^[*][/][{][}]/, '').replace(/[/][/][*]$/, '');
console.log(css); // "html {}"
      

/  
               {}
html {}
/

    {}

userContent.cssをドキュメントに適用する場合は @-moz-document の処理が必要になるが、それはまた次回。