Both sides previous revisionPrevious revisionNext revision | Previous revision |
dev:zotero_7_for_developers [2024/03/30 10:04] – [Custom Item Pane Sections] dstillman | dev:zotero_7_for_developers [2024/05/06 08:33] (current) – [Localization] xiangyu |
---|
| |
(''MozXULElement'' will be a property of the window you're modifying.) | (''MozXULElement'' will be a property of the window you're modifying.) |
| |
| Please ensure that you have inserted the FTL into the window before making any changes to the DOM. |
| |
If adding to an existing window, be sure to remove the ''<link>'' in your plugin's ''shutdown'' function: | If adding to an existing window, be sure to remove the ''<link>'' in your plugin's ''shutdown'' function: |
A new API in Zotero 7 allows plugins to create custom sections. Plugins should use this official API rather than manually injecting content into the item pane. | A new API in Zotero 7 allows plugins to create custom sections. Plugins should use this official API rather than manually injecting content into the item pane. |
| |
The example below shows how to register a custom section with the item details (e.g., ''id'' and ''editable'') displayed. ''paneID'', ''pluginID'', ''head'', and ''sidenav'' are required. | The example below shows how to register a custom section with the item details (e.g., ''id'' and ''editable'') displayed. ''paneID'', ''pluginID'', ''header'', and ''sidenav'' are required. |
| |
<code javascript> | <code javascript> |
pluginID: "example@example.com", | pluginID: "example@example.com", |
header: { | header: { |
l10nID: "reader-use-dark-mode-for-content", | l10nID: "example-item-pane-header", |
icon: "chrome://zotero/skin/16/universal/book.svg", | icon: rootURI + "icons/16/universal/book.svg", |
}, | }, |
sidenav: { | sidenav: { |
l10nID: "zotero-toolbar-tabs-menu", | l10nID: "example-item-pane-header", |
icon: "chrome://zotero/skin/20/universal/save.svg", | icon: rootURI + "icons/20/universal/book.svg", |
}, | }, |
onRender: ({ body, item, editable, tabType }) => { | onRender: ({ body, item, editable, tabType }) => { |
=== Firefox 102 → Firefox 115 === | === Firefox 102 → Firefox 115 === |
| |
* ''OS.File'', ''OS.Path'', and ''OS.Constants.Path'' have been removed in favor of [[https://firefox-source-docs.mozilla.org/dom/ioutils_migration.html|IOUtils]] and [[https://searchfox.org/mozilla-esr115/source/dom/chrome-webidl/PathUtils.webidl|PathUtils]]. To help developers get their code running on 115 as quickly as possible, we've created [[https://github.com/zotero/zotero/blob/main/chrome/content/zotero/osfile.mjs|shims]] for most functions, which you can use by adding this line to your files:\\ ''%%var { OS } = ChromeUtils.importESModule("chrome://zotero/content/osfile.mjs");%%''\\ You should update your code to use ''IOUtils'' and ''PathUtils'' as soon as possible rather than relying on these shims long-term. ([[https://github.com/zotero/zotero/commit/920461cd9de098b230c9298015e6c9563123f558|examples]]) | * ''OS.File'', ''OS.Path'', and ''OS.Constants.Path'' have been removed in favor of [[https://firefox-source-docs.mozilla.org/dom/ioutils_migration.html|IOUtils]] and [[https://searchfox.org/mozilla-esr115/source/dom/chrome-webidl/PathUtils.webidl|PathUtils]] (which were already available in Firefox 102). To help developers get their code running on 115 as quickly as possible, we've created [[https://github.com/zotero/zotero/blob/main/chrome/content/zotero/osfile.mjs|shims]] for most functions, which you can use by adding this line to your files:\\ ''%%var { OS } = ChromeUtils.importESModule("chrome://zotero/content/osfile.mjs");%%''\\ You should update your code to use ''IOUtils'' and ''PathUtils'' as soon as possible rather than relying on these shims long-term. ([[https://github.com/zotero/zotero/commit/920461cd9de098b230c9298015e6c9563123f558|examples]]) |
* UI now uses modern flexbox instead of XUL layout, so Mozilla CSS properties need to be replaced with standard properties (e.g., ''-moz-box-flex: 1'' → ''flex: 1'') and there are various layout differences ([[https://github.com/zotero/zotero/commit/de42dce16ed155b5d180587d965f4745093353ed|example]]; [[https://groups.google.com/a/mozilla.org/g/firefox-dev/c/9sGpF1TNbLk/m/QpU3oTUuAgAJ|details]]) | * UI now uses modern flexbox instead of XUL layout, so Mozilla CSS properties need to be replaced with standard properties (e.g., ''-moz-box-flex: 1'' → ''flex: 1'') and there are various layout differences ([[https://github.com/zotero/zotero/commit/de42dce16ed155b5d180587d965f4745093353ed|example]]; [[https://groups.google.com/a/mozilla.org/g/firefox-dev/c/9sGpF1TNbLk/m/QpU3oTUuAgAJ|details]]) |
* Most Mozilla JSM modules have been renamed to ''.sys.mjs'' and must be imported with ''ChromeUtils.importESModule()'' or ''ChromeUtils.defineESModuleGetters()'' | * Most Mozilla JSM modules have been renamed to ''.sys.mjs'' and must be imported with ''ChromeUtils.importESModule()'' or ''ChromeUtils.defineESModuleGetters()'' |
* ''nsIPromptService'' → ''Services.prompt'' ([[https://github.com/zotero/zotero/commit/b6a597a7f920e98b22ff369bcadea8d7dc1f09e6|example]]) | * ''nsIPromptService'' → ''Services.prompt'' ([[https://github.com/zotero/zotero/commit/b6a597a7f920e98b22ff369bcadea8d7dc1f09e6|example]]) |
* ''loadURI()'' signature change ([[https://github.com/zotero/zotero/commit/e76c6c6a1a83df3cc9e04129d1c785c28ab57ae4|example]]) | * ''loadURI()'' signature change ([[https://github.com/zotero/zotero/commit/e76c6c6a1a83df3cc9e04129d1c785c28ab57ae4|example]]) |
| * ''width'' and ''height'' attributes are no longer recognized on XUL elements (''window'', ''wizard'', ''box'', etc.). Can be replaced with CSS rules (''min-width'', ''width'', ''max-width'', etc.). ([[https://github.com/zotero/zotero/commit/db499fdf2bd51489eaeea1f93f085816f65d5292|example]]) |
| |
Additionally, while a Zotero-specific change, the import line for ''FilePicker'' has changed for Firefox 115:\\ ''%%var { FilePicker } = ChromeUtils.importESModule('chrome://zotero/content/modules/filePicker.mjs');%%'' | Additionally, while a Zotero-specific change, the import line for ''FilePicker'' has changed for Firefox 115:\\ ''%%var { FilePicker } = ChromeUtils.importESModule('chrome://zotero/content/modules/filePicker.mjs');%%'' |
* ''Zotero.Browser'' → ''HiddenBrowser.jsm'' — post on dev list for further discussion if you're currently relying on a hidden browser ([[https://github.com/zotero/zotero/commit/6a2949be8a87aebe5ddadd881e4ea22d8b5a8f60|details]]) | * ''Zotero.Browser'' → ''HiddenBrowser.jsm'' — post on dev list for further discussion if you're currently relying on a hidden browser ([[https://github.com/zotero/zotero/commit/6a2949be8a87aebe5ddadd881e4ea22d8b5a8f60|details]]) |
* The import line for ''FilePicker'' has changed:\\ ''%%var { FilePicker } = ChromeUtils.importESModule('chrome://zotero/content/modules/filePicker.mjs');%%'' | * The import line for ''FilePicker'' has changed:\\ ''%%var { FilePicker } = ChromeUtils.importESModule('chrome://zotero/content/modules/filePicker.mjs');%%'' |
| * In an upcoming beta, most PNG icons will be removed or replaced by their SVG versions. You can search for the new icons in ''chrome/skin/default/zotero''. |