202
edits
Compatibility/System Addon/Override Policies and Workflows: Difference between revisions
Compatibility/System Addon/Override Policies and Workflows (view source)
Revision as of 09:18, 2 February 2018
, 2 February 2018Add information about authoring JS and CSS overrides
(Move the generic steps out of the specialized sections) |
(Add information about authoring JS and CSS overrides) |
||
| Line 71: | Line 71: | ||
=== CSS Injections === | === CSS Injections === | ||
==== Designing the injection ==== | |||
As with user agent overrides, CSS injections should be designed to use as little code as possible. Due to the nature of these overrides, it is hard to provide exact guidelines. | |||
Injected CSS files will be in the first place of the cascading chain, so be careful to use selectors with a high specificity, or use the ''!important'' keyword. | |||
==== Technical details ==== | ==== Technical details ==== | ||
CSS injections are defined within individual files within the [https://github.com/mozilla/webcompat-addon/blob/master/src/webextension/injections/css/ src/webextension/injections/css/] directory of the addon sources. In this folder, you will find a collection of files, one file per override or injection. For easier cross-reference, please stick to the ''bugNNNNN-short-description.css'' file name schema. | |||
In addition, the injection file has to be registered in the manifest file located at [https://github.com/mozilla/webcompat-addon/blob/master/src/webextension/manifest.json src/webextension/manifest.json]. Details on available parameters can be found [https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/content_scripts in the MDN web docs]. | |||
=== JS Injections === | === JS Injections === | ||
==== Designing the injection ==== | |||
As with user agent overrides, JS injections should be designed to use as little code as possible. Due to the nature of these overrides, it is hard to provide exact guidelines. | |||
The injected JS will be executed in its own context per default, check [https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#Content_script_environment the MDN web docs] for details. If it is required to run JS in the websites context, JS code can be wrapped inside an ''eval'' call: | |||
<syntaxhighlight lang="js"> | |||
window.wrappedJSObject.eval(`(function() { | |||
/* your code here */ | |||
}());`); | |||
</syntaxhighlight> | |||
==== Technical details ==== | ==== Technical details ==== | ||
JS injections are defined within individual files within the [https://github.com/mozilla/webcompat-addon/blob/master/src/webextension/injections/js/ src/webextension/injections/js/] directory of the addon sources. In this folder, you will find a collection of files, one file per override or injection. For easier cross-reference, please stick to the ''bugNNNNN-short-description.js'' file name schema. | |||
In addition, the injection file has to be registered in the manifest file located at [https://github.com/mozilla/webcompat-addon/blob/master/src/webextension/manifest.json src/webextension/manifest.json]. Details on available parameters can be found [https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/content_scripts in the MDN web docs]. | |||
== Open points for further discussion == | == Open points for further discussion == | ||