What is Browser Extension?

A browser extension is a computer program that extends the functionality of a web browser in some way. Depending on the browser and the version, the term may be distinct from similar terms such as plug-in or add-on. Extensions can be created through use of web technologies such as HTML, JavaScript, and CSS. Browser extensions can also improve the user interface of the web browser with out directly affecting viewable content of a web page. This improvement can be achieved through a variety of add ons such as toolbars and plug-ins.

Wikipedia — http://en.wikipedia.org/wiki/Browser_extension

What is Xpom Xpum! Software Development Kit?

Xpom-Xpum! SDK — free and open-source IDE for Google Chrome extensions and applications. It canr create, edit, run Google Chrome extensions in browser (without debug), and pack them to CRX and ZIP.

System Requirements

  • Windows XP (with Service Pack 3) / Vista / 7 / 8 / 8.1
  • .NET Framework 4
  • Google Chrome browser, or other Chromium-based browser

Getting Started

  1. Run your Xpom-Xpum! SDK via "Xpom-Xpum! Integrated Development Environment.exe".
  2. Go to File > New.
  3. Select the Chrome Extension project type. Enter an extension name into Project Name field. It should't contain \/?"<> and other special symbols because Xpom-Xpum! SDK will create a folder with such name.
    Remember your Project Directory. It will be a directory with extension code files.
    Click OK.
  4. Next, click the Run button on toolbar or in menu.
  5. Xpom-Xpum! SDK will run your Google Chrome browser with your installed extension. If Google Chrome is already runned, it will be add an extension in an existing Google Chrome's session.
    Go to chrome://extensions. You will see your extension in the list bellow.

IF YOU HAVE NOT GOOGLE CHROME

You can use Xpom-Xpum! SDK with any other Chromium browser if it properly supports command-line extensions installation.
We recommend: Comodo Dragon, SRWare Iron, Uran, Yandex browser.

  1. Go to Run > Run Settings.
  2. Click Add Browser To List.
  3. Set browser's executable path (i.e. C:\Program Files\Browser\chrome.exe).
  4. Click OK.
  5. Important: Select this browser in the Browsers List in Run Settings window.
  6. Click OK in Run Settings window.

BROWSER ACTION

Use browser actions to put icons in the main Google Chrome toolbar, to the right of the address bar.
In addition to its icon, a browser action can also have a tooltip, a badge, and a popup.

Google's Chrome Extensions Documentation — https://developer.chrome.com/extensions/browserAction

CONTENT SCRIPTS

Content scripts are JavaScript files that run in the context of web pages.
By using the standard Document Object Model (DOM), they can read details of the web pages the browser visits, or make changes to them.

Google's Chrome Extensions Documentation — https://developer.chrome.com/extensions/content_scripts

HOW TO RUN EXTENSION OUTSIDE OF XPOM-XPUM! SDK

  1. Run Google Chrome or any other Chromium-based browser supports Extensions Developer Mode.
  2. Go to chrome://extensions.
  3. Check Developer Mode checkbox.
  4. Drag your Project Directory from Explorer to chrome://extensions page.

HOW TO PACK EXTENSION TO ONE INSTALLABLE PACKAGE FILE

Warning: this extension installation method is deprecated in actual Chromium browser's version and all browsers based on it.
Now you should you should use Chrome Webstore to publish your extensions to community.

  1. Go to Run > Pack to CRX.
  2. Go to Project Directory's parent directory. You will see a *.crx file over short time.
  3. You can open with file via any old Chromium-based browser, or drag it to chrome://extensions page.

IDE Adjusting

Xpom-Xpum! IDE can be adjusted in different directions.

OWN PROJECT TYPE

  1. Go to "Templates" directory in your Xpom-Xpum SDK path.
  2. Create directory "My Own Project Template" and go to it.
  3. Create Template.json in this directory. This JSON file structure you can see bellow:
    {
        "TemplateSchemaVersion": "1", // Reserved value
        
        "TemplateNameEN": "My Own Project Template", // Your Template Name in English (must equal to your template directory)
        "TemplateNameRU": "Мой Шаблон Проекта", // Your Template Name in Russian
        
        "TemplateDirectory": "My Own Project Template/", // Your Template Directory
        
        "TemplateFilesDirectory": "Files\\" // Your Template's Files Directory
    }
    Important: if you want to get russian template name readable, you should save this file in UTF-8 encoding.
  4. Create Files directory in your Template Directory.
  5. Put Manifest.json and any other templateally extension's files into the Files directory.
  6. Run the Xpom-Xpum! SDK.

OWN PROJECT ITEM TYPE

There are no documentation for this option because this option is under construction and not fully-realized in current Xpom-Xpum! SDK version.

EDITOR'S SYNTAX HIGHLIGHTING

  1. Go to "Syntax Highlighting" directory in your Xpom-Xpum SDK path.
  2. Open JavaScript.xshd file.
  3. Make any changes in conformity with AvalonEdit XSHD Format.

OTHER ADJUSTING

Xpom-Xpum! SDK is free open-source product. This C# source code is available under The MIT License.
You can simply open it in Microsoft Visual Studio 2010/2012/2013/2015 (including free Express) and adjust and build it without any limitations.

Last edited Mar 4, 2015 at 12:26 PM by JurKu, version 4