Skip to content

Commit

Permalink
Add FAQ (#35)
Browse files Browse the repository at this point in the history
* Add FAQ

* Update FAQ

* Update Uninstall Response and SW

* Update Menu Match to Permalink

* Tweak Dialogs

* Move Feedback Redirect to FAQ

* Update Edge File Access

* Change Chrome Class

* Update Docs/FAQ

* Make processBrowser Asynchronous

* Update Index

* Add Test PDF
  • Loading branch information
smashedr authored Aug 15, 2024
1 parent 4c986f0 commit 580788e
Show file tree
Hide file tree
Showing 12 changed files with 363 additions and 63 deletions.
4 changes: 3 additions & 1 deletion src/_config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@ site_name: Link Extractor
menu:
- name: Home
link: /
- name: Documentation
- name: Docs
link: /docs/
- name: FAQ
link: /faq/
- name: Screen Shots
link: /screenshots/

Expand Down
4 changes: 2 additions & 2 deletions src/_layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
<ul class="navbar-nav me-auto">
{% for item in site.menu %}
<li class="nav-item">
<a class="nav-link {% if page.title == item.name %}active{% endif %}"
<a class="nav-link {% if page.permalink == item.link %}active{% endif %}"
href="{{ item.link | relative_url }}" {% if item.external %}target="_blank"{% endif %}>
{{ item.name }}{% if item.external %} <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i>{% endif %}</a>
</li>
Expand Down Expand Up @@ -116,7 +116,7 @@
<ol class="list-inline mb-1 d-flex flex-column flex-sm-row">
{% for item in site.menu %}
<li class="list-inline-item mb-2 mb-sm-0">
<a class="link-body-emphasis text-decoration-none {% if page.title == item.name %}fw-bold{% endif %}"
<a class="link-body-emphasis text-decoration-none {% if page.permalink == item.link %}fw-bold{% endif %}"
href="{{ item.link | relative_url }}" {% if item.external %}target="_blank"{% endif %}>
{{ item.name }}{% if item.external %} <i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i>{% endif %}</a>
</li>
Expand Down
45 changes: 18 additions & 27 deletions src/html/docs.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,32 +15,22 @@ <h1 class="animate__animated animate__zoomIn"><i class="fa-regular fa-file-lines
<a class="body-link" href="#links">Link Results</a>
</p>

<div id="feedback" class="alert alert-success alert-dismissible d-none animate__animated animate__zoomInDown" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<p>
<i class="fa-regular fa-thumbs-up me-2"></i> Thank you for providing feedback. If you provided details we will look into them.
</p>
<p>
If you would like feedback from the developer you can open an
<a class="alert-link" href="{{ site.github_url }}/issues" target="_blank" rel="noopener">Issue</a> on GitHub.
</p>
<p class="mb-0">
You may also request support and get help on the <a class="alert-link" href="{{ site.discord_invite }}" target="_blank" rel="noopener">Discord Server</a>.
</p>
</div>

<div id="new-install" class="alert alert-success alert-dismissible d-none" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<h4 class="alert-heading">Thank You...</h4>
<p class="mb-0">
for installing {{ site.site_name }}. {{ site.site_name }}'s goal is to be the ultimate link extraction web extension.
<br>
If you run into any issues or want to see new features, please <a class="alert-link" href="{{ "/#support" | relative_url }}">let us know</a>.
</p>
<div id="new-install" class="d-none">
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<h4 class="alert-heading">Thank You...</h4>
<p class="mb-0">
for installing {{ site.site_name }}. {{ site.site_name }}'s goal is to be the ultimate link extraction web extension.
<br>
If you run into any issues or want to see new features, please <a class="alert-link" href="{{ "/#support" | relative_url }}">let us know</a>.
</p>
</div>
</div>

{% comment %}{% include alerts.html %}{% endcomment %}

<p>Note: Documentation is specific to your browser, <span id="browser-name"></span>.</p>

<h2 id="configure">Configure</h2>
<hr class="mt-0">

Expand All @@ -49,7 +39,7 @@ <h2 id="configure">Configure</h2>
You can pin the Addon by locating the {{ site.site_name }} icon on the Extension Toolbar, then
<span class="d-none firefox">clicking the Settings Wheel and Pin to Toolbar.</span>
<span class="d-none edge">clicking the Eye icon.</span>
<span class="d-none chromium">clicking the Pin icon.</span>
<span class="d-none chrome">clicking the Pin icon.</span>
</p>
<p class="d-inline-flex gap-1">
<a class="body-link text-decoration-none animate__animated animate__headShake animate__delay-1s" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Expand All @@ -61,7 +51,7 @@ <h2 id="configure">Configure</h2>
<div class="collapse mb-3" id="collapseExample">
<img src="{{ "/media/images/firefox-pin.jpg" | relative_url }}" class="img-thumbnail d-none firefox" alt="Chrome Pin Extension" width="360">
<img src="{{ "/media/images/edge-pin.jpg" | relative_url }}" class="img-thumbnail d-none edge" alt="Chrome Pin Extension" width="360">
<img src="{{ "/media/images/chrome-pin.jpg" | relative_url }}" class="img-thumbnail d-none chromium" alt="Chrome Pin Extension" width="360">
<img src="{{ "/media/images/chrome-pin.jpg" | relative_url }}" class="img-thumbnail d-none chrome" alt="Chrome Pin Extension" width="360">
</div>

<h4>Host Permissions</h4>
Expand All @@ -71,6 +61,7 @@ <h4>Host Permissions</h4>
<a class="body-link" href="{{ "/screenshots/02.jpg" | relative_url }}" target="_blank">
View Screen Shot of Host Permissions. <i class="fa-solid fa-arrow-up-right-from-square fa-xs"></i></a>
</p>
<p class="d-none firefox">Firefox requires host permission in order to extract links from PDF documents.</p>
<p>
<span class="text-warning-emphasis">Important:</span> To extract links from multiple tabs, first select the tabs by holding the
<kbd>Ctrl</kbd> key and select additional tabs; then use Link Extractor as normal to extract from all selected tabs.
Expand Down Expand Up @@ -107,7 +98,7 @@ <h4>Omnibox</h4>
<p class="d-none firefox">
<span class="text-warning-emphasis">Important:</span> Firefox requires Host Permissions for Omnibox usage.
</p>
<p class="d-none chromium edge">
<p class="d-none chrome edge">
<span class="text-warning-emphasis">Note:</span> <b>Chrome/Edge</b> does not allow an empty omnibox entry.
To extract all links, simply enter a second space after activating the Omnibox, then press enter.
</p>
Expand Down Expand Up @@ -159,7 +150,7 @@ <h5><i class="fa-regular fa-keyboard"></i> Keyboard Shortcuts</h5>
On Edge shortcuts are managed by entering the following into your address bar:
<kbd role="button" data-clipboard-text="edge://extensions/shortcuts">edge://extensions/shortcuts</kbd>
</span>
<span class="d-none chromium">
<span class="d-none chrome">
On Chrome shortcuts are managed by entering the following into your address bar:
<kbd role="button" data-clipboard-text="chrome://extensions/shortcuts">chrome://extensions/shortcuts</kbd>
</span>
Expand Down Expand Up @@ -246,7 +237,7 @@ <h5><i class="fa-solid fa-i-cursor"></i> Filter</h5>
Icon and Click
<i class="fa-solid fa-gear d-none firefox"></i>
<i class="fa-regular fa-eye-slash d-none edge"></i>
<i class="fa-solid fa-thumbtack ms-1 d-none chromium"></i>
<i class="fa-solid fa-thumbtack ms-1 d-none chrome"></i>
</span>
</div> <!-- pin-notice -->

Expand Down
181 changes: 181 additions & 0 deletions src/html/faq.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
---
layout: default
permalink: /faq/
title: Frequently Asked Questions
description: Frequently Asked Questions about the Link Extractor Web Extension.
---

<div id="faq" class="container-fluid">
<h1 class="animate__animated animate__zoomIn"><i class="fa-solid fa-person-circle-question me-2"></i> {{ page.title }}</h1>

<p>
<i class="fa-regular fa-lightbulb text-warning-emphasis me-2"></i>
Tip: Click on a question to expand the answer.
</p>

<div id="feedback" class="d-none ">
<div class="alert alert-success alert-dismissible animate__animated animate__zoomInDown" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<p>
<i class="fa-regular fa-thumbs-up me-2"></i> Thank you for providing feedback. If you provided details we will look into them.
</p>
<p>
If you would like feedback from the developer you can open an
<a class="alert-link" href="{{ site.github_url }}/issues" target="_blank" rel="noopener">Issue</a> on GitHub.
</p>
<p class="mb-0">
You may also request support and get help on the <a class="alert-link" href="{{ site.discord_invite }}" target="_blank" rel="noopener">Discord Server</a>.
</p>
</div>
</div>

<p>Note: Answers are specific to your browser, <span id="browser-name"></span>.</p>

<p class="lead">
<a id="expand-all" class="link-body-emphasis" data-expand="true" role="button">
<i class="fa-solid fa-arrow-down-short-wide me-3"></i><span>Expand All</span></a>
</p>

<!-- noLinks -->

<h4 class="my-4">
<a class="body-link" role="button" data-bs-toggle="collapse" aria-expanded="false"
aria-controls="noLinks" href="#noLinks">
<i class="fa-solid fa-angle-right me-2"></i> No links are extracted?
</a>
</h4>
<div class="collapse" id="noLinks">
<div class="">
<ol>
<li>If you just installed the extension, you may need to close and re-open the tab to extract links.</li>
<li>Try re-starting your browser. Make sure to close all open windows then re-open the browser.</li>
<li>If you cant extract links from any tabs try re-installing the extension. Make sure to export any saved filters first.</li>
<li>
If you are still unable to extract links, please
<a href="https://github.com/cssnr/link-extractor/issues" target="_blank" rel="noopener">open an issue on GitHub</a>;
and we will do our best to resolve the issue.
</li>
</ol>
<span>
If you don't have a GitHub account, you can
<a href="https://cssnr.github.io/feedback/?app=Link%20Extractor" target="_blank" rel="noopener">submit feedback here</a>.
<br>
Make sure to <b>include a link to the site</b> you are having issues with.
</span>
</div>
</div>

<!-- fileAccess -->

<h4 class="my-4">
<a class="body-link" role="button" data-bs-toggle="collapse" aria-expanded="false"
aria-controls="fileAccess" href="#fileAccess">
<i class="fa-solid fa-angle-right me-2"></i> Allow access to file:/ URLs?
</a>
</h4>
<div class="collapse" id="fileAccess">
<p class="">
Note: File extraction is currently experimental and only works on PDF files.
</p>
<div class="alert alert-warning mb-0 d-none firefox">
Firefox does <b>not</b> allow access to file:/ URLs.
</div>
<div class="d-none chrome">
<ol>
<li>Navigate to: <kbd role="button" data-clipboard-text="chrome://extensions">chrome://extensions</kbd></li>
<li>Scroll until you find Link Extractor and click <b>Details</b>.</li>
<li>Scroll until you find <b>Allow access to file URLs</b> and enable the toggle.</li>
</ol>
<span>You should now be able to extract links from file URLs.</span>
</div>
<div class="alert alert-warning mb-0 d-none edge">
Edge does <b>not</b> allow access to file:/ URLs.
</div>
{% comment %}<div class="d-none edge">{% endcomment %}
{% comment %}<ol>{% endcomment %}
{% comment %}<li>Navigate to: <kbd role="button" data-clipboard-text="edge://extensions">edge://extensions</kbd></li>{% endcomment %}
{% comment %}<li>Scroll until you find Link Extractor and click <b>Details</b>.</li>{% endcomment %}
{% comment %}<li>Check the box labeled <b>Allow access to file URLs</b>.</li>{% endcomment %}
{% comment %}</ol>{% endcomment %}
{% comment %}<span>You should now be able to extract links from file URLs.</span>{% endcomment %}
{% comment %}</div>{% endcomment %}
</div>

<!-- privateAccess -->

<h4 class="my-4">
<a class="body-link" role="button" data-bs-toggle="collapse" aria-expanded="false"
aria-controls="privateAccess" href="#privateAccess">
<i class="fa-solid fa-angle-right me-2"></i> Allow access to incognito or private browsing windows?
</a>
</h4>
<div class="collapse" id="privateAccess">
<div class="d-none firefox">
<ol>
<li>Navigate to <kbd role="button" data-clipboard-text="chrome://extensions">about:addons</kbd> or press <kbd>Ctrl+Shift+A</kbd></li>
<li>Scroll until you find Link Extractor and click on the tile.</li>
<li>Scroll until you find <b>Run in Private Windows</b> and toggle the Allow radio.</li>
</ol>
<span>The extension should now load in new Private Windows.</span>
</div>
<div class="d-none chrome">
<ol>
<li>Navigate to: <kbd role="button" data-clipboard-text="chrome://extensions">chrome://extensions</kbd></li>
<li>Scroll until you find Link Extractor and click <b>Details</b>.</li>
<li>Scroll until you find <b>Allow in Incognito</b> and enable the toggle.</li>
</ol>
<span>The extension should now load in new Incognito Windows.</span>
</div>
<div class="d-none edge">
<ol>
<li>Navigate to: <kbd role="button" data-clipboard-text="edge://extensions">edge://extensions</kbd></li>
<li>Scroll until you find Link Extractor and click <b>Details</b>.</li>
<li>Check the box labeled <b>Allow in InPrivate</b>.</li>
</ol>
<span>The extension should now load in new IniPrivate Windows.</span>
</div>
</div>

<!-- multipleTabs -->

<h4 class="my-4">
<a class="body-link" role="button" data-bs-toggle="collapse" aria-expanded="false"
aria-controls="multipleTabs" href="#multipleTabs">
<i class="fa-solid fa-angle-right me-2"></i> Extract links from multiple tabs at the same time?
</a>
</h4>
<div class="collapse" id="multipleTabs">
<div class="">
<ol>
<li>
Ensure you have granted Host Permission to the extension, from the Popup or Options Page.
<a class="body-link" href="{{ "/screenshots/02.jpg" | relative_url }}" target="_blank">
Screen Shot. <i class="fa-solid fa-arrow-up-right-from-square fa-xs"></i></a>
</li>
<li>While pressing and holding the <kbd>Ctrl</kbd> key, select all the tabs you wish to extract from.</li>
<li>With the tabs highlighted, extract links as normal using either the Popup, Shortcuts, or Omnibox.</li>
</ol>
<span>The link results page should have results from all the tabs you selected.</span>
</div>
</div>

<hr class="mt-4">

<p>
Don't see your question here? Ask on the
<a href="https://github.com/cssnr/link-extractor/discussions/categories/q-a" target="_blank" rel="noopener">Q&A Discussion</a>
on GitHub.
{% comment %}<a href="https://github.com/cssnr/link-extractor" target="_blank" rel="noopener">GitHub</a>.{% endcomment %}
</p>
<p>
You can also easily report any issues through the
<a href="https://cssnr.github.io/feedback/?app=Link%20Extractor%20Website" target="_blank" rel="noopener">feedback form</a>.
</p>
<p>
Support is also provided on the
<a href="{{ site.discord_invite }}" target="_blank" rel="noopener">CSSNR Discord</a> server.
</p>
<p>Additional information can be found on the <a href="{{ "/docs/" | relative_url }}">Documentation page</a>.</p>
</div>

<script type="text/javascript" src="{{ "/js/faq.js" | relative_url }}"></script>
9 changes: 9 additions & 0 deletions src/html/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,12 @@ <h1 class="animate__animated animate__zoomIn"><i class="fa-solid fa-link me-2"><
<li>Extract Links from Selected Text on any Site</li>
<li>Extract Links from Clipboard or Any Text</li>
<li>Extract Links from All Selected Tabs</li>
<li>
Extract Links from PDF Documents
<span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Experimental Feature">
<i class="fa-solid fa-flask text-warning-emphasis ms-1"></i>
</span>
</li>
<li>Open Multiple Links in Tabs from Text</li>
<li>Download Links and Domains as a Text File</li>
<li>Copy the Text from a Link via Context Menu</li>
Expand Down Expand Up @@ -103,6 +109,9 @@ <h2 id="support">Support</h2>
<p class="lead">
For usage instructions, head over to the
<a class="body-link" href="{{ "/docs/" | relative_url }}">Documentation</a>.
<br>
You can also review the
<a class="body-link" href="{{ "/faq/" | relative_url }}">Frequently Asked Questions</a>.
</p>

<p>
Expand Down
4 changes: 2 additions & 2 deletions src/html/uninstall.html
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ <h1 class="align-middle mb-0">{{ site.site_name }}</h1>
Please provide a <strong class="">link to the site</strong> that is not functioning.
</div>
<div class="my-2">
<label for="uninstall-response" class="form-label visually-hidden">Uninstall Feedback</label>
<textarea class="form-control" id="uninstall-response" rows="4" maxlength="1000"
<label for="user-response" class="form-label visually-hidden">Uninstall Feedback</label>
<textarea class="form-control" id="user-response" rows="4" maxlength="1000"
placeholder="Optional Feedback, Bugs, Missing Features, etc..." autofocus></textarea>
<span id="inputCounter" class="float-end label label-default"><span id="input-count">0</span> / 1000</span>
</div>
Expand Down
Loading

0 comments on commit 580788e

Please sign in to comment.