☰

Element Fullscreen

Fullscreen any element on a webpage

目前為 2020-12-10 提交的版本，檢視 最新版本。

如何安裝

您需要先安裝使用者腳本管理器擴展，如 Tampermonkey、Greasemonkey 或 Violentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Violentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能，如 Tampermonkey或 Userscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展，比如 Tampermonkey，才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

（我已經安裝了使用者腳本管理器，讓我安裝！）

如何安裝

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展，比如 Stylus，才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

（我已經安裝了使用者樣式管理器，讓我安裝！）

作者
Shaun Mitchell
評價
0 0 0
版本
0.3
建立日期
2020-08-29
更新日期
2020-12-10
尺寸
7.7 KB
授權條款
WTFPL
腳本執行於
所有網站

Element-F

Element fullscreen

This userscript allows you to full screen any element on the page with a click! Focus on the main content of an article, fullscreen gifs or videos even if they don't have a fullscreen option, zoom in on pictures, etc...

Steps

  1. Press shift-ctrl-f to toggle element selection mode on. The cursor will appear as crosshairs, and the target element will have a slight box-shadow around it
  2. Once you've got the element you want selected, just click!

Customization

You can easily customize the keypress, the style applied to focused elements, and the style applied to the fullscreen element

Edit the lines in the following sections to change those options

Selection Mode Keypress

var toggleElementSelectionKey = "F";
var toggleElementSelectionAlt = false;
var toggleElementSelectionCtrl = true;

Target Element Style

var focusedStyle = `box-shadow: 0 3px 6px rgba(0,0,0,0.16),
                                0 3px 6px rgba(0,0,0,0.23),
                                0 3px 6px rgba(255,255,255,0.16),
                                0 3px 6px rgba(255,255,255,0.23) !important;`;

Fullscreen Element Style

var fullScreenStyle = "padding: 1em !important;";

Error reporting

I make no promises about prompt replies or maintenance, but if you run into an issue, please follow these steps, and I'll try to look into it:

  1. Set DEBUG (immediately under the metadata block) to true: var DEBUG = true;
  2. Launch your browser's javascript console (see this page for help doing so)
  3. Repeat the steps that caused the issue
  4. Take a screenshot of the console with the Element-F debug messages
  5. Send me an email (see @author) with the subject "Element-F Issue" and the screenshots attached

TODO

  • [ ] Update configuration settings to use GM_config
  • [ ] Create Chrome plugin
  • [ ] Create Firefox plugin