Asset Injector
Allows administrators to inject CSS and JavaScript into page output based on configurable rules without modifying themes.
asset_injector
インストール
composer require 'drupal/asset_injector:8.x-2.21'
composer require 'drupal/asset_injector:8.x-2.20'
概要
Asset Injectorは、CSS InjectorとJS Injectorの機能を単一のモジュールに統合し、サイト管理者が本格的なテーマ開発に踏み込むことなく、DrupalサイトにカスタムCSSやJavaScriptスニペットを素早く簡単に追加する方法を提供します。
すべての設定はConfig Entityとしてデータベースに保存されるため、Features、Drush config export、またはYAMLファイルを使用したカスタムモジュールインストールを通じて完全にエクスポート可能です。このアーキテクチャは、各サイトがサイトごとの設定で管理するのが最も簡単な軽微な違いを持つ可能性があるマルチサイトインストールで特に有用です。
このモジュールはDrupalのCondition Plugin APIを活用し、柔軟でコンテキストを認識したアセット注入を提供します。アセットはURLパス、コンテンツタイプ、ユーザーロール、テーマ、言語、その他の登録されたCondition Pluginに基づいて条件付きで表示できます。モジュールは最適なパフォーマンスのためにCSS/JSの前処理と集約もサポートしています。
Features
- メディアタイプ（all、print、screen）とCSS前処理/集約をサポートしたCSS注入
- オプションのjQuery依存関係、ヘッダー/フッター読み込みオプション、JS前処理/集約を備えたJavaScript注入
- DrupalのCondition Pluginシステム（パス、コンテンツタイプ、テーマ、言語、ユーザーロール）を使用した条件付きアセット表示
- テーマごとのリージョンマッピングを備えたJavaScriptインジェクター用のnoscriptフォールバックサポート
- CSSとJavaScriptのシンタックスハイライト機能を備えたACEコードエディター統合
- Drush、Features、またはYAMLファイルによるエクスポート/インポートを可能にするConfig Entityベースのストレージ
- WYSIWYGエディター内でスタイルを適用するためのCSSアセット用CKEditor統合
- 既存のインジェクターのバリエーションを素早く作成するためのアセット複製機能
- アセットを削除せずに有効化/無効化できる機能
- 柔軟なルール組み合わせを可能にするAND/OR条件ロジック
- アセットの作成、更新、削除時の自動キャッシュ無効化
- ドメイン/言語固有のアセットバリエーションのためのDrupalのconfig overrideシステムのサポート
Use Cases
Quick CSS fixes for specific pages
Add targeted CSS fixes for specific pages without modifying theme files. For example, float a sidebar element on node edit pages by creating a CSS injector with path condition '/node/*/edit'.
Third-party tracking scripts
Inject third-party tracking scripts (analytics, marketing pixels) on specific pages or content types without modifying theme templates. Use conditions to limit scripts to production environment or specific sections.
A/B testing styles
Create multiple CSS injectors with different styling approaches, enable/disable them to quickly test visual changes without deployment. Use the duplicate feature to create variations.
Multi-site customization
In a multi-site setup, use Asset Injector to manage site-specific CSS/JS tweaks per site while sharing a common codebase and theme.
JavaScript enhancements without custom modules
Add small JavaScript enhancements (scroll behaviors, form validations, UI tweaks) without creating custom modules. Useful for site builders who need quick functionality additions.
Print stylesheets
Add print-specific CSS using the media type selector to optimize page printing for specific content types or sections.
Role-based styling
Apply different styling for authenticated users, administrators, or specific roles using the user role condition.
Language-specific adjustments
On multilingual sites, inject language-specific CSS or JavaScript to handle RTL layouts, font adjustments, or locale-specific behaviors.
Theme-specific overrides
Apply CSS/JS only when a specific theme is active, useful for making adjustments to contrib themes without creating a sub-theme.
Noscript fallback content
Provide alternative content for users with JavaScript disabled, such as static versions of dynamic elements or informational messages.
Tips
- Use the 'Save and Continue Editing' button when iterating on CSS/JS code to avoid navigating back to the edit form repeatedly.
- Take advantage of the duplicate feature to create variations of existing injectors with slight modifications.
- Use the 'Require all conditions' setting strategically - unchecking it allows for OR logic which can simplify complex targeting scenarios.
- For performance, keep 'Preprocess' enabled unless you specifically need the asset to load separately for debugging purposes.
- Load JavaScript in the footer (default) rather than header for better page load performance.
- Export injector configurations via Drush (drush config:export) to track changes in version control.
- Use path wildcards like /admin/* to target entire sections of the site.
- When debugging, temporarily disable other CSS/JS aggregation to isolate issues with specific injectors.
Technical Details
Admin Pages 7
/admin/config/development/asset-injector
Main landing page for the Asset Injector module providing links to CSS Injector and JS Injector administration pages.
/admin/config/development/asset-injector/css
Lists all CSS injector configurations with their conditions and status. Provides operations to edit, delete, enable, disable, and duplicate each CSS injector.
/admin/config/development/asset-injector/css/add
Form to create a new CSS injector configuration with code, conditions, and advanced options.
/admin/config/development/asset-injector/css/{asset_injector_css}
Form to edit an existing CSS injector configuration. Same fields as the add form but with the machine name disabled.
/admin/config/development/asset-injector/js
Lists all JavaScript injector configurations with their conditions and status. Provides operations to edit, delete, enable, disable, and duplicate each JS injector.
/admin/config/development/asset-injector/js/add
Form to create a new JavaScript injector configuration with code, conditions, noscript fallback, and advanced options.
/admin/config/development/asset-injector/js/{asset_injector_js}
Form to edit an existing JS injector configuration. Same fields as the add form but with the machine name disabled.
権限 2
Hooks 1
hook_asset_injector_library_info_build_alter
Allows other modules to alter the dynamic library array generated by Asset Injector before it is returned to Drupal for inclusion.
Troubleshooting 6
Check that the injector is enabled (Status: Enabled), verify the conditions are correctly configured, and clear all caches. Also ensure the user has the appropriate permissions to view the content.
Ensure the public://asset_injector directory exists and is writable by the web server. Check file system permissions in Administration > Reports > Status report.
CKEditor integration requires the CSS injector to be enabled and have no conditions that would prevent it from loading. Verify the injector status and conditions.
Check browser console for JavaScript errors. Ensure the code does not include <script> wrapper tags. If the code requires jQuery, enable the 'Requires jQuery' checkbox.
Asset Injector automatically invalidates caches when saving, but if using external caching (Varnish, CDN), you may need to purge those caches manually.
Drupal 9.5+ changed the theme condition to support only a single theme. Review your theme condition settings and select only one theme per asset.
Security Notes 7
- The 'Administer JS Assets' permission allows injection of arbitrary JavaScript and should only be granted to highly trusted administrators as it can be used for XSS attacks.
- The 'Administer CSS Assets' permission is less dangerous but can still be used to alter page appearance maliciously or inject CSS-based attacks.
- Both permissions have 'restrict access: true' indicating they should be carefully managed.
- Asset code is not sanitized - administrators are responsible for ensuring injected code is safe.
- Consider using Content Security Policy (CSP) headers to provide additional protection against injected script attacks.
- Review all injector configurations periodically, especially on sites with multiple administrators.
- Generated asset files are stored in publicly accessible directories - do not include sensitive information in injected code.