Chrome extension to for Bible.com

This extension will help you project Bible verses in your Church, You decide which version to display and also can project parallel versions or in 2 different languages.

⚙ Install Plugin

• ✔ Install Chrome plugin from Chrome web store Project verses from bible.com
• visit https://bible.com/bible
  • new actions (💬, 🛠, ❔, 📌) should be visible in top/left corner
• 📌 Pin extension to see it after search bar for fast access
  • Click on Extension icon

Table of Contents

• ⚙ Install Plugin
• 💠 Features & Usage
• 📈 Release Notes
• 🎞 Results
• 🎫 QR Code
• 👋 Support my Work
• 💠 Advanced Features
• ⚙ Setup Plugin as Developer
• ▶ Build procedure
• 📋 Developers TODOs (items to improve)

💠 Features & Usage

• 🔤 Project selected verses (+/- parallel text)
  • 🔎 Search Book and Chapter
  • Click on verse number to display it on projector
  • Up / Down / Left / Right arrows to navigate to next/preview verses
  • CTRL + Click to add verse to selection (multi select)
  • Shift + Click to multi select between last selection
  • ALT + Click on verse number or Pinned reference, to force project window to be on top (in case is not visible)
  • ESC to show blank page (hide all selected verses)
  • F11 to enter/exit fullscreen projector window (first focus it)
• 💬 Project "live text" (fast and simple slide)
  • input any text to be projected (Markdown format)
  • CTRL + Enter to project live text (inside title or textarea)
  • Select any text from page and allow it to be projected
• 📌 List/Pin some references (verses)
  • Store references for future selection and project them faster
  • Enter to add references (, or ; as separator) in Pin verses 🔍 input
  • Enter + Enter to project added reference
  • Shift + Enter to add and project full reference (Mat 6:7-13)
  • ALT + Click on Reference - force project (on top)
  • CTRL + Click project all verses from pin (Mat 6:7-13)
  • 📝 Edit All to Copy/Paste/Edit multiple references
  • ➕ will pin current Reference if search input is empty
  • 'Search pin': 16, 2-4, 2:4, 2 4, +Enter - pin current chapter or verses
  • ↕ drag & drop to reorder verses
  • 🖱 Context menu (right click) for more actions inside pin list
    • 📄 Copy selected verse to clipboard
    • 📄 Copy all pin verses to clipboard
    • ✖ Clear all
  • Change Reference 🔍 from Projector tab - works same as Add Ref's 🔍
    • Tab inside projector tab to see bottom dock-bar
    • 🖱 move mouse at the bottom edge of projector tab
    • Type any reference and use same shortcuts to project it (Enter or Shift + Enter for multiple verses)
• 2️⃣ open Multiple chrome tabs with different chapters
  • all windows will project to the same projector page
  • projector page will close only when all tabs from bible.com are closed
• 🛠 User Settings (top-left actions)
  • Toggle 1️⃣ primary OR 2️⃣ parallel verses to be projected
  • Adjust css variables (spacing, colors)
  • remember last windows position (projector & settings)
  • ☽ Try Night mode extension

📈 Release Notes

Check release-notes.md changelog

💚 Love this extension? Share feedback and help us make it even better!

🎞 Results

1️⃣ Primary View + projected

2️⃣ Parallel View + projected

💬 Actions

🛠 Settings

🎫 QR Code

bit.ly/project-bible

👋 Support my Work

A simple way to support my work & to improve your programming skills is to buy My course on Udemy. (Or you can Gift this course to someone that will benefit from it).

• ‍💻 Become a WEB Developer from Scratch, step by step Guide - by Nicolae Matei

💠 Advanced Features

• Slide master - allow Multiple layouts (easy switch between them)
  • 🕒 Clock position (or hide)
  • Upload multiple background images and allow to easy switch them
  • Background Opacity (make image lighter or darker)
• Allow other extensions to send data to be projected
  • via Chrome Runtime Messages (chrome.runtime.sendMessage)
  • example how to project songs on this extension: github.com/unu-unu-ro/norless-improvements-extension

⚙ Setup Plugin as Developer

If you want to try the latest versions before they are released, or to change code as you wish, try to install it as Developer

• Download/Clone this repository
  • < > Code (green button) then Download ZIP
    • unzip it and you will have chrome-bible-utilities folder
  • or git clone https://github.com/nmatei/chrome-bible-utilities.git
    • to update use git pull
• (optional) If you have Slide Master configured in the production extension, preserve your settings:
  • Open 🛠 Settings in the production extension
  • Go to Slide Master and click Export to save your slides configuration
• Open chrome://extensions/
  • Disable the production extension
  • Activate Developer mode
• Load unpacked Extension
• Select chrome-bible-utilities folder (from unzipped or cloned repo)
  • (optional) If you exported slides earlier: open 🛠 Settings, go to Slide Master and click Import to restore your slides configuration
• Visit https://bible.com/bible and enjoy the latest version!

Note: Once the fix you needed is officially released on the Chrome Web Store, don't forget to:

• Disable the dev extension in chrome://extensions/
• Re-enable the production extension to benefit from latest stable releases
• Turn off Developer mode in chrome://extensions/ — it is only needed when running unpacked extensions or actively developing

▶ Build procedure

• make sure all files are commited and pushed
• npm install
• npm run deploy
• under /build folder you will find latest zip file
• upload it to chrome web store

📋 Developers TODOs (items to improve)

• Multi slides to project content (same as live text but with multiple slides)
  • Add/Edit/Remove slides
• shortcuts for bold / italic - inside live text
• Check if verses are not in sync
  • Available Language mappings and version
    • Russian (НРП/СИНОД/SYNO/CARS/CARS-A)
    • Ukrainian (UBIO)
      • Check [RO] Ioel mapping for Ukrainian (UBIO) - is it correct? (ex. Ioel 3:10 => Іоіл ?)
  • Review Translations and create other mappings
    • Especially for 🟨🟦 Ukrainian & ⬜🟦🟥 Russian
    • 🙏 mappings tests
    • 🙏 need some external help here (if you find issues please create a tiket with link you've seen)
• 🛠 User Settings
  • Allow video as background image...
  • Allow to easy select font family from drop down (or add your own)
  • Add config for body / verses text shadow.
  • Allow display inline/block for main screen
  • Empty Text display (ex. Church name, verse, motto, etc.)
    • Customize size & color
• Add WebHooks configs (ex. to publish to wireless monitors)
  • create integration app that can be installed
• i18n
• cleanup chars when add ref from copy/paste
  • ‭‭Filipeni‬
• use TypeScript and a build system?
  • https://medium.com/@tharshita13/creating-a-chrome-extension-with-react-a-step-by-step-guide-47fe9bab24a1
• improve adding verses that have Diacritics (ex. 1 imp 11:9 -> 1 împ 11:9 - is not recognized so shortcut will not work - use improved matching search)

🐛 Known bugs

• https://www.bible.com/bible/191/EXO.15.VDC (v.2 - custom background color in dark mode - text not fully visible)
• Select verse from parallel view then press right/left arrows - will not project the correct format
• Page refresh after openPinReference (after verse navigation) - not sure yet why it happens
  • Temporary fix: select Parallel view then Exit Parallel Mode