Last Modified:

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

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

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

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

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

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

コメントアウト解釈

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

基本形はこの形。

//*
;
//*/{}

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


;

に見え、インラインコメントが理解できないCSSからは
/

    {}
に見える(もちろん / {} はCSS的にsyntax errorだけど解決法が見つからなかった)。

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

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

JavaScriptとして解釈すると

   
const css = `*/{}
html {}
//*`.replace(/^[*][/][{][}]/, '').replace(/[/][/][*]$/, '');
console.log(css); // "html {}"
      
となり、CSSとして解釈すると
/  
               {}
html {}
/

    {}
となる。

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