### Example Commit and Push

Source: https://github.com/dteviot/webtoepub/wiki/Developer-guide

An example of staging specific files, committing with a descriptive message, and pushing.

```bash
git add plugin/js/parsers/xyParser.js
git add plugin/popup.html
git commit -m "Add xyParser"
git push
```

--------------------------------

### Running Unit Tests with Node.js

Source: https://github.com/dteviot/webtoepub/blob/ExperimentalTabMode/readme.md

Instructions to install dependencies and run unit tests using npm.

```bash
npm install
npm test
```

--------------------------------

### Build the extension

Source: https://github.com/dteviot/webtoepub/blob/ExperimentalTabMode/readme.md

Installs dependencies, lints, and builds the extension files.

```sh
npm install
npm run lint
```

--------------------------------

### Git Configuration for User Name and Email

Source: https://github.com/dteviot/webtoepub/wiki/Developer-guide

Commands to configure the global user name and email for Git commits.

```bash
git config --global user.name "<your name>"
git config --global user.email "<your email>"
```

--------------------------------

### Git Commands for Cloning and Setting Up Upstream

Source: https://github.com/dteviot/webtoepub/wiki/Developer-guide

Commands to clone the forked repository, set up the upstream remote, and fetch changes.

```bash
git clone https://github.com/<your_name>/WebToEpub.git
cd WebToEpub
git remote add upstream https://github.com/dteviot/WebToEpub.git
git fetch upstream
```

--------------------------------

### Creating a New Branch from Upstream/ExperimentalTabMode

Source: https://github.com/dteviot/webtoepub/wiki/Developer-guide

Fetches upstream changes and creates a new branch based on the 'upstream/ExperimentalTabMode' branch.

```bash
git fetch upstream
git checkout -b <new_branch_name> upstream/ExperimentalTabMode
```

--------------------------------

### Content Script Example

Source: https://github.com/dteviot/webtoepub/blob/ExperimentalTabMode/doc/CodeProjectNotes.html

This script packs the DOM of the current page into a message and sends it back to the extension.

```javascript
// pack the DOM of this page into a message
var parseResults = { 
    messageType: "ParseResults",
    document: document.all[0].outerHTML,
};

// send message back to our extension
chrome.runtime.sendMessage(parseResults);
```

--------------------------------

### Popup Script Example

Source: https://github.com/dteviot/webtoepub/blob/ExperimentalTabMode/doc/CodeProjectNotes.html

This onload function in popup.html registers a listener for messages from the content script and injects the content script into the active tab.

```javascript
// actions to do when window opens
window.onload = function () {
    // register listener that is called when content script injected into HTML sends its results 
    chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
        if (request.messageType == "ParseResults") {
            // convert the string returned from content script back into a DOM
            let dom = new DOMParser().parseFromString(message.document, "text/html");
            // pass the DOM onto our function to extract the story info (more on this later)
            processHtmlFromTab(dom);
        }
    });

    // inject the content script into the active tab.
    // in this case, the content script is in a file called "ContentScript.js"
    chrome.tabs.executeScript({file: "js/ContentScript.js"});    
}
```

--------------------------------

### Committing and Pushing Changes

Source: https://github.com/dteviot/webtoepub/wiki/Developer-guide

Stages specific changed files, commits them with a message, and pushes the changes to the remote repository.

```bash
git add <your_changed_fiels>
git commit -m "<commit message>"
git push
```

--------------------------------

### Editing Chapter URLs

Source: https://github.com/dteviot/webtoepub/wiki/FAQ

Example format of a hyperlink for a chapter URL within the 'Edit Chapter URLs' text editor.

```html
<a href="URL_TO_DOWNLOAD">Title</a>
```

--------------------------------

### Run linting and web-ext command

Source: https://github.com/dteviot/webtoepub/wiki/Monthly(?)-build-and-release-process

Commands to lint the WebToEpub project and run it on Firefox-Android using web-ext.

```bash
npm run lint
adb devices
web-ext run -t firefox-android --adb-device XXX
```

--------------------------------

### Contribution Workflow

Source: https://github.com/dteviot/webtoepub/blob/ExperimentalTabMode/readme.md

Steps to follow when contributing to the project.

```git
git checkout -b feature/AmazingFeature
git commit -m 'Add some AmazingFeature'
git push origin feature/AmazingFeature
```

--------------------------------

### Running Unit Tests without Node.js (Firefox)

Source: https://github.com/dteviot/webtoepub/blob/ExperimentalTabMode/readme.md

Steps to run unit tests in Firefox by modifying the security.fileuri.strict_origin_policy setting.

```bash
security.fileuri.strict_origin_policy
```

--------------------------------

### Running Unit Tests without Node.js (Chrome)

Source: https://github.com/dteviot/webtoepub/blob/ExperimentalTabMode/readme.md

Steps to run unit tests in Chrome by allowing file access from files and adjusting cookie settings.

```bash
chrome.exe --allow-file-access-from-files
```

--------------------------------

### Adding OPF file to JSZip

Source: https://github.com/dteviot/webtoepub/blob/ExperimentalTabMode/doc/CodeProjectNotes.html

This code snippet illustrates adding the OPF (Open Packaging Format) file to the JSZip object. The OPF file describes the EPUB's content and structure.

```javascript
zipFile.file("content.opf", buildContentOpf(), { compression: "DEFLATE" });
```

--------------------------------

### Adding container.xml file to JSZip

Source: https://github.com/dteviot/webtoepub/blob/ExperimentalTabMode/doc/CodeProjectNotes.html

This code snippet shows how to add the 'container.xml' file to a JSZip object. This file specifies the OPF file within the EPUB.

```javascript
zipFile.file("META-INF/container.xml", "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<container version=\"1.0\" xmlns=\"urn:oasis:names:tc:epub:2009:meta:container\">\n  <rootfiles>\n    <rootfile full-path=\"content.opf\" media-type=\"application/xhtml+xml\"/>\n  </rootfiles>\n</container>");
```

--------------------------------

### Custom Filename Placeholders

Source: https://github.com/dteviot/webtoepub/wiki/Advanced-Options

Defines placeholders that can be used to construct custom filenames for EPUBs.

```text
%Title%
%Author%
%Language%
%Filename%
%URL_hostname%
%Chapters_Count%
%Chapters_Downloaded%
```

--------------------------------

### Popup HTML Structure

Source: https://github.com/dteviot/webtoepub/blob/ExperimentalTabMode/doc/CodeProjectNotes.html

The HTML structure for the popup.html file, including input fields for story attributes and tables for chapter information.

```html
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>WebToEpub</title>
    <base />
</head>
<body>
    <style>
        body {
        }
        .scrollingtable {
            overflow: scroll;
            height: 300px;
        }
    </style>
    <section id="inputSection">
        <table id="inputTable">
            <tr>
                <td>Starting URL</td>
                <td><input id="startingUrlInput" type="url" name="startingUrlInput" size="80" /></td>
            </tr>
            <tr>
                <td>Title</td>
                <td><input id="titleInput" type="text" name="titleInput" size="80" /></td>
            </tr>
            <tr>
                <td>Author</td>
                <td><input id="authorInput" type="text" name="authorInput" size="80" /></td>
            </tr>
            <tr>
                <td>Language</td>
                <td><input id="languageInput" type="text" name="languageInput" size="80" /></td>
            </tr>
        </table>
        <button id=fetchChaptersButton>Fetch Chapters</button>
        <button id=packEpubButton>Pack EPUB</button>
    </section>
    <section id="testSection"></section>
    <section id="outputSection">
        <div class="scrollingtable">
            <table id=chapterUrlsTable>
                <tr>
                    <th align=left>Title</th>
                    <th align=left>Loaded?</th>
                    <th align=left>URL</th>
                </tr>
            </table>
        </div>
    </section>
    <!-- scripts go here -->
    <script src="js/EpubMetaInfo.js"></script>
    <script src="js/Util.js"></script>
    <script src="js/HttpClient.js"></script>
    <script src="js/parsers/ArchiveOfOurOwnParser.js"></script>
    <script src="js-lib/jszip.min.js"></script>
    <script src="js/EpubPacker.js"></script>
    <script src="js/testFunctions.js"></script>
    <script src="js/main.js"></script>
</body>
</html>
```

--------------------------------

### Clone the repository

Source: https://github.com/dteviot/webtoepub/blob/ExperimentalTabMode/readme.md

Clones the WebToEpub repository from GitHub.

```sh
git clone https://github.com/dteviot/WebToEpub.git
```

--------------------------------

### Adding mimetype file to JSZip

Source: https://github.com/dteviot/webtoepub/blob/ExperimentalTabMode/doc/CodeProjectNotes.html

This code snippet demonstrates how to add the 'mimetype' file to a JSZip object, which is a required step in creating an EPUB.

```javascript
zipFile.file("mimetype", "application/epub+zip");
```

--------------------------------

### Chrome Extension Manifest

Source: https://github.com/dteviot/webtoepub/blob/ExperimentalTabMode/doc/CodeProjectNotes.html

The manifest.json file for the Web To EPUB extension, detailing version, icons, permissions, and browser action.

```json
{
  "manifest_version": 2,
  "name": "WebToEpub",
  "version": "1",
  "icons": { "128": "book128.png" },
  "permissions": ["tabs", "<all_urls>" ],
  "browser_action": {
    "default_title": "",
    "default_icon": "book128.png",
    "default_popup": "popup.html"
  },
  "minimum_chrome_version": "46"
}
```

--------------------------------

### Option to Chapter Info Function

Source: https://github.com/dteviot/webtoepub/blob/ExperimentalTabMode/doc/CodeProjectNotes.html

This JavaScript function converts an option element into an object containing the chapter's source URL and title.

```javascript
optionToChapterInfo: function(optionElement) {
    return {
        sourceUrl: optionElement.getAttribute("value"),
        title: optionElement.innerText
    };
}
```

--------------------------------

### Fix lint errors

Source: https://github.com/dteviot/webtoepub/blob/ExperimentalTabMode/readme.md

Automatically fixes linting errors in the extension code.

```sh
npm run lint:fix
```

--------------------------------

### saveAs function polyfill

Source: https://github.com/dteviot/webtoepub/blob/ExperimentalTabMode/doc/CodeProjectNotes.html

A JavaScript function to simulate the saveAs functionality, which is no longer directly supported by Chrome.

```javascript
saveAs: function (blob, fileName) {
    var a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = fileName;
    a.click();
}
```