davidbgk
/
larlet-fr-david-cache
Seguir 1
Destacar 0
Fork 0
Código Lanzamientos 0 Actividad
A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
399 Commits
1 Rama
Árbol: c94d3b1ee0
Ramas Etiquetas
${ item.name }
Crear rama ${ searchTerm }
desde 'c94d3b1ee0'
${ noResults }
larlet-fr-david-cache/cache/b431025fdd5261443b3a89a3f60.../index.html

index.html 31KB
Original Blame Histórico

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Extensions in Firefox 59 (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://blog.mozilla.org/addons/2018/01/26/extensions-firefox-59/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Extensions in Firefox 59 (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://blog.mozilla.org/addons/2018/01/26/extensions-firefox-59/">Source originale du contenu</a></h3>

  463.     <p><img src="https://ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com/addons/files/2018/01/puzzle-1746563_640-160x160.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" title="" srcset="https://blog.mozilla.org/addons/files/2018/01/puzzle-1746563_640-160x160.png 160w, https://blog.mozilla.org/addons/files/2018/01/puzzle-1746563_640-252x252.png 252w, https://blog.mozilla.org/addons/files/2018/01/puzzle-1746563_640-600x600.png 600w, https://blog.mozilla.org/addons/files/2018/01/puzzle-1746563_640.png 640w" sizes="(max-width: 160px) 100vw, 160px"/> <p><a href="https://www.mozilla.org/firefox/">Firefox Quantum</a> continues to make <a href="https://arstechnica.com/gadgets/2018/01/firefoxs-continued-quantum-transformation-more-multithreading-tracking-protection/">news</a> as Mozilla incorporates even more <a href="https://hacks.mozilla.org/2018/01/making-webassembly-even-faster-firefoxs-new-streaming-and-tiering-compiler/">innovative technology</a> into the platform. The development team behind the WebExtensions architecture is no exception, landing a slew of new API and improvements that can now be found in Firefox 59 (just released to <a href="https://www.mozilla.org/firefox/channel/desktop/">the Beta channel</a>).</p></p>

  464. <p>As always, documentation for the API discussed here can be found on <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions">MDN Web Docs</a> (some of the features below are just hitting the main branch as of this post, so if you don’t find the documentation on MDN, check back in a few days).</p>

  465. 

  466. <h2><a id="experimental-tab-hiding"/>Experimental Tab Hiding</h2>

  467. 

  468. <p>Tab hiding is back! Since the deprecation of the legacy extension architecture, one of the most requested features has been the ability to hide tabs with the WebExtensions API. It was a key element of some very popular legacy add-ons that provided the ability to manage tab groups. Firefox 59 brings this capability back in an initial, experimental form.</p>

  469. 

  470. <p>The API is very straightforward:</p>

  471. 

  472. <ul>

  473. <li>Include the “tabHide” permission in your manifest file.</li>

  474. <li>Use tabs.hide() with the tab ID (or list of tab IDs) to hide tabs.</li>

  475. <li>Use tabs.show() with the tab ID (or list of tab IDs) to show hidden tabs.</li>

  476. <li>Examine the tabs.Tab.hidden field to determine if a tab is currently hidden.</li>

  477. </ul>

  478. 

  479. <p>Note that the visible state of a tab is completely independent from its discarded state. While it may make sense to keep certain tabs active and loaded in memory while hidden, we encourage you to use tabs.discard() in combination with tabs.hide() to help manage memory and resource usage.</p>

  480. 

  481. <p>There are certain restrictions when hiding tabs:</p>

  482. 

  483. <ul>

  484. <li>Tabs that are pinned cannot be hidden</li>

  485. <li>Tabs that are sharing their screen, microphone or camera cannot be hidden</li>

  486. <li>The current active tab cannot be hidden</li>

  487. <li>Tabs that are in the process of being closed cannot be hidden</li>

  488. </ul>

  489. 

  490. <p>The reintroduction of hidden tabs to Firefox does not come without some concern. A primary motivation for moving to the WebExtensions framework is to offer users a safer extension ecosystem that can be trusted to protect their security and privacy. Obviously, tab hiding opens the door for malicious extensions to hide tabs, doing things in the background without a user’s knowledge.</p>

  491. 

  492. <p>To make sure we get things right, tab hiding is disabled by default. To enable the API, you must manually go to the about:config page and set extensions.webextensions.tabhide.enabled to true. This restriction will remain in place until:</p>

  493. 

  494. <ul>

  495. <li>Additional user interface features are added to Firefox that allow users to see all of their hidden tabs and/or show those tabs independent of any extension. This user interface work is currently active and on-going.</li>

  496. <li>Developers (internal and external) have had some time to try the API and understand its strengths and weaknesses. In particular, we want some time to gather input on the potential for abuse.</li>

  497. </ul>

  498. 

  499. <p>To be clear, this API is currently <b>experimental</b>. It could change, or even go away entirely if we can’t provide it in a secure manner.  Nevertheless, Firefox has a long, proud history of customization and the team is committed to upholding that tradition with tab hiding. So please give the API a try and see what you think. With your help, we will work to make tab hiding as fully functional as possible while still maintaining the security of the WebExtensions architecture.</p>

  500. 

  501. <p>Want to jump right in a see what it’s like? Give the <a href="https://addons.mozilla.org/en-US/firefox/addon/tab-hider/">Tab Hider</a> extension a try.</p>

  502. 

  503. <h2>Additional Tab Features</h2>

  504. 

  505. <p>While tab hiding is the big feature to land in Firefox 59, it isn’t the only thing related to tabs.</p>

  506. 

  507. <h2>Even More Theme API</h2>

  508. 

  509. <p>Continuing the “theme” of previous releases, Firefox 59 includes a number of additions to the Theme API that allow you to customize even more of the browser’s appearance, including:</p>

  510. 

  511. <h2>Improvements to the webRequest API</h2>

  512. 

  513. <p>The webRequest API now <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1377689">merges multiple headers with the same name</a> rather than using only the last one. In addition, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1149250">a couple</a> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1418275">of mechanisms</a> were added to the webRequest API to allow for requests to be upgraded from HTTP to HTTPS.</p>

  514. 

  515. <p>Finally, to make debugging a lot easier, exceptions raised from a webRequest blocking listener now <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1428094">report the original error message and filename</a>. Below is an example:</p>

  516. 

  517. <div id="attachment_8371" class="wp-caption aligncenter"><img class="size-full wp-image-8371" src="https://ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com/addons/files/2018/01/Screenshot-2018-1-24-1428094-Exception-raised-from-a-webRequest-blocking-listener-BEFORE.png" alt="Before Firefox 59" srcset="https://blog.mozilla.org/addons/files/2018/01/Screenshot-2018-1-24-1428094-Exception-raised-from-a-webRequest-blocking-listener-BEFORE.png 811w, https://blog.mozilla.org/addons/files/2018/01/Screenshot-2018-1-24-1428094-Exception-raised-from-a-webRequest-blocking-listener-BEFORE-252x21.png 252w, https://blog.mozilla.org/addons/files/2018/01/Screenshot-2018-1-24-1428094-Exception-raised-from-a-webRequest-blocking-listener-BEFORE-768x63.png 768w, https://blog.mozilla.org/addons/files/2018/01/Screenshot-2018-1-24-1428094-Exception-raised-from-a-webRequest-blocking-listener-BEFORE-600x50.png 600w" sizes="(max-width: 811px) 100vw, 811px"/><p class="wp-caption-text">Before Firefox 59</p></div>

  518. 

  519. <div id="attachment_8372" class="wp-caption aligncenter"><img class="size-full wp-image-8372" src="https://ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com/addons/files/2018/01/Screenshot-2018-1-24-1428094-Exception-raised-from-a-webRequest-blocking-listener-AFTER.png" alt="Starting With Firefox 59" srcset="https://blog.mozilla.org/addons/files/2018/01/Screenshot-2018-1-24-1428094-Exception-raised-from-a-webRequest-blocking-listener-AFTER.png 817w, https://blog.mozilla.org/addons/files/2018/01/Screenshot-2018-1-24-1428094-Exception-raised-from-a-webRequest-blocking-listener-AFTER-252x19.png 252w, https://blog.mozilla.org/addons/files/2018/01/Screenshot-2018-1-24-1428094-Exception-raised-from-a-webRequest-blocking-listener-AFTER-768x58.png 768w, https://blog.mozilla.org/addons/files/2018/01/Screenshot-2018-1-24-1428094-Exception-raised-from-a-webRequest-blocking-listener-AFTER-600x46.png 600w" sizes="(max-width: 817px) 100vw, 817px"/><p class="wp-caption-text">Starting With Firefox 59</p></div>

  520. 

  521. <h2>Register Content Scripts at Runtime</h2>

  522. 

  523. <p>Another big feature landing with Firefox 59 is the ability to <a href="https://developer.mozilla.org/Add-ons/WebExtensions/API/contentScripts">register content scripts</a> at runtime. This is an important feature for extensions that want to support user scripting.</p>

  524. 

  525. <p>Using the contentScripts.register() API, extensions can dynamically associate content scripts with different URLs, lifting the previous limitation that all content scripts had to be listed statically in the manifest file.</p>

  526. 

  527. <h2>Support for Decentralization Protocols</h2>

  528. 

  529. <p>Mozilla has always been a <a href="https://www.mozilla.org/en-US/internet-health/decentralization/">proponent of decentralization</a>, recognizing that it is a key ingredient of a healthy Internet. Starting with Firefox 59, several protocols that support decentralized architectures are approved for use by extensions.  The newly approved protocols are:</p>

  530. 

  531. <p>Firefox itself does not implement these protocols, but having them on the approved list means the browser recognizes them as valid protocols and extensions are free to provide implementations.</p>

  532. 

  533. <h2>browserAction and pageAction Improvements</h2>

  534. 

  535. <p>Browser Actions and Page Actions are two of the most popular types of extensions that we see submitted to the Firefox <a href="https://addons.mozilla.org/">Add-Ons website</a>.  Accordingly, the team behind WebExtensions continues to expand and improve the API for those types of extensions.</p>

  536. 

  537. <ul>

  538. <li>pageActions can now be <a href="https://developer.mozilla.org/Add-ons/WebExtensions/manifest.json/page_action">shown and/or hidden automatically</a> for specific pages via pattern matching using the “hide_matches” and “show_matches” manifest properties. This is a nice performance win for users.</li>

  539. <li><a href="https://developer.mozilla.org/Add-ons/WebExtensions/API/browserAction#Functions">browserAction set* methods can now accept a null value</a> which removes the property from the browserAction.</li>

  540. <li>Invalid badge background colors are <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1427107">now rejected</a> (provides more Chrome compatibility).</li>

  541. <li>An extension can now <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1427431">determine </a>if its browserAction is enabled or disabled (browserAction.isEnabled), a pageAction is currently shown for a tab ( pageActions.isShown), and if its sidebarAction is currently open (sidebarAction.isOpen).</li>

  542. </ul>

  543. 

  544. <h2>Enhancement to Cookies</h2>

  545. 

  546. <p>The ability for extensions to control cookies in the browser expanded in Firefox 59, including:</p>

  547. 

  548. <h2>Proxy Settings</h2>

  549. 

  550. <p>Extensions can now <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1425535">override the proxy settings</a> in the browser which has been another highly requested feature.  Using the browserSettings.proxyConfig.set() API, the following proxy settings can be controlled:</p>

  551. 

  552. <ul>

  553. <li>proxyType: The type of proxy to use.</li>

  554. <li>http: The address of the http proxy, can include a port.</li>

  555. <li>httpProxyAll: Use the http proxy server for all protocols.</li>

  556. <li>ftp: The address of the ftp proxy, can include a port.</li>

  557. <li>ssl: The address of the ssl proxy, can include a port.</li>

  558. <li>socks: The address of the socks proxy, can include a port.</li>

  559. <li>socksVersion: The version of the socks proxy.</li>

  560. <li>passthrough: A list of hosts which should not be proxied.</li>

  561. <li>autoConfigUrl: A URL to use to configure the proxy.</li>

  562. <li>autoLogin: Do not prompt for authentication if password is saved.</li>

  563. <li>proxyDNS: Proxy DNS when using SOCKS v5.</li>

  564. </ul>

  565. 

  566. <h2>User Notification of Extensions Overrides</h2>

  567. 

  568. <p>As with previous releases, when functionality is provided via WebExtensions that allows extensions to control some aspect of the browser, Firefox will inform the user which extension controls that aspect and provide a way for them to regain control.</p>

  569. 

  570. <p>The ability for an extension to control the browser’s tracking protection setting was added back in Firefox 57 via the websites.trackingProtectionMode API. Firefox 59 now shows when an extension controls tracking protection.</p>

  571. 

  572. <p><img class="aligncenter size-full wp-image-8373" src="https://ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com/addons/files/2018/01/tracking-protection.gif" alt="Tracking Protection Notification"/></p>

  573. 

  574. <p>In the above image, notice that a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1403751">message is now displayed</a> after a user disables an extension reminding them how to re-enable it, also a new feature of Firefox 59.</p>

  575. 

  576. <p>One of the most popular browser defaults to override is the new tab page. Firefox already shows the user when an extension has overridden that page, but starting with Firefox 59 it also informs the user of the override on the first appearance of the new tab page itself. Plus, it is smart enough to <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1414018">revert back to the previous new tab</a> if the new override is declined.</p>

  577. 

  578. <p><img class="aligncenter size-full wp-image-8374" src="https://ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com/addons/files/2018/01/restore-settings-multiple.mov.gif" alt="Restore New Tab"/></p>

  579. 

  580. <h2>Additional Browser Controls</h2>

  581. 

  582. <p>To better support mouse gestures, browserSettings.contextMenuShowEvent() has been added in this version. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1419426">This new API</a> can be set to “mouseup” or “mousedown” by extensions to determine when context menus should be shown. Note that this is not supported on Android, and also calling it with a value of “mousedown” on Windows is a no-op.</p>

  583. 

  584. <p>Also in Firefox 59, read-only browserSettings now <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1408472">return false when calling set or clear</a> and also report an accurate levelofControl.</p>

  585. 

  586. <h2>Context Menus for Bookmarks</h2>

  587. 

  588. <p>Speaking of context menus, you can now set <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/menus/ContextType#Type">custom context menus for bookmarks</a>.  This will work on the bookmarks toolbar, the library menu, the bookmarks subview, and the bookmarks menu.</p>

  589. 

  590. <h2>Development and Debugging</h2>

  591. 

  592. <p>One of the best ways to suggest a new WebExtension API is to prototype it via an official experiment. Two major changes landed for WebExtension experiments that makes this significantly easier:</p>

  593. 

  594. <p>Also in Firefox 59, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1429567">more detail has been added to sandbox names</a> to aid in debugging.</p>

  595. 

  596. <h2>Miscellaneous Changes and Fixes</h2>

  597. 

  598. <p>A number of smaller items were also landed in the new Firefox 59 Beta, including:</p>

  599. 

  600. <h2>More to Come</h2>

  601. 

  602. <p>Firefox 59 landed a total of <a href="https://mzl.la/2CJN9gE">69 items</a> for WebExtensions, the most important of which are discussed above. Thank you to everyone who had a part in getting it to Beta, especially volunteer contributors <a href="https://mozillians.org/u/andregarzia/">Andre Garzia</a>, <a href="https://mozillians.org/u/ntim/">Tim Nguyen</a>, <a href="https://mozillians.org/u/Oriol/">Oriol Brufau</a>, Javier Serrano Polo, Kevin Jones, <a href="https://mozillians.org/u/tushararora/">Tushar Arora</a>, <a href="https://mozillians.org/u/freaktechnik/">Martin Giger</a>, Peter Snyder, Lukas Jung. Additional changes and improvements to the WebExtensions API are already in progress for Firefox 60, so please continue to send us your feedback. And as always, thank you for using Firefox and helping ensure that individuals have the ability to shape the Internet and their own experiences on it.</p>

  603.   </article>

  604. </section>

  605. 

  606. 

  607. <nav id="jumpto">

  608.   <p>

  609.     <a href="/david/blog/">Accueil du blog</a> |

  610.     <a href="https://blog.mozilla.org/addons/2018/01/26/extensions-firefox-59/">Source originale</a> |

  611.     <a href="/david/stream/2019/">Accueil du flux</a>

  612.   </p>

  613. </nav>

  614. 

  615. <footer>

  616.   <div>

  617.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  618.     <p>

  619.       Bonjour/Hi!

  620.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  621.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  622.     </p>

  623.     <p>

  624.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  625.     </p>

  626.     

  627.     <p>

  628.       Voici quelques articles choisis :

  629.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  630.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  631.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  632.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  633.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  634.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  635.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  636.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  637.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  638.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  639.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  640.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  641.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  642.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  643.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  644.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  645.     </p>

  646.     <p>

  647.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  648.     </p>

  649.     <p>

  650.       Je ne traque pas ta navigation mais mon

  651.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  652.       conserve des logs d’accès.

  653.     </p>

  654.   </div>

  655. </footer>

  656. <script type="text/javascript">

  657.   ;(_ => {

  658.     const jumper = document.getElementById('jumper')

  659.     jumper.addEventListener('click', e => {

  660.       e.preventDefault()

  661.       const anchor = e.target.getAttribute('href')

  662.       const targetEl = document.getElementById(anchor.substring(1))

  663.       targetEl.scrollIntoView({behavior: 'smooth'})

  664.     })

  665.   })()

  666. </script>