/Chrome-SP-Editor

A Google Chrome Extension for creating and updating files (js, css) in SharePoint Online from Chrome Developer Tools

Primary LanguageJavaScript

SP Editor

A Google Chrome Extension for creating and updating files (js, css) in SharePoint Online from Chrome Developer Tools

Here's a great introduction video by Jeff Jones

Version history

  • 4.4.1 Refactoring
  • 4.4.0 New feature in Search
    • Request reindex for web, thanks @koskila for the contribution.
    • Updated PnPjs to 1.2.6
  • 4.3.2 Updated PnPjs to 1.2.3
  • 4.3.1 Bug fix in Modern Properties
  • 4.3.0 Updated PnPjs to 1.2.1 and monaco editor to 0.14.3
  • 4.2.1 Search query tool enhancements
    • submit on Enter
    • auto scroll to results
    • view preview of search payload
    • show spinner while searching
    • show errors
  • 4.2.0 New feature
    • Search query tool
  • 4.1.4 Added optional ClientState when subscribing to list webhooks, thanks @thomyg for the contribution.
  • 4.1.3 Updated PnPjs to 1.1.4
  • 4.1.2 Updated PnPjs to 1.1.3
  • 4.1.1 Updated PnPjs to 1.1.2
  • 4.1.0 Updated monaco editor to 0.13.1
    • Added some new sample scripts
    • Restored snippets
  • 4.0.0 Updated PnPjs Console to use new PnPjs modules
    • bugfix: css injections will not be loaded when in termstoremanager, thanks @juhaalhojoki
  • 3.7.0 New feature in Modern Properties
    • View HubSites and Sites connected to HubSites
  • 3.6.3 New feature in Webhooks
    • Added button to update webhook expiration date for 6 months more
  • 3.6.2 New feature in File Editor
    • Pressing ctrl/cmd + D downloads the current file in editor
    • Updated sp-pnp-js to 3.0.6
  • 3.6.1 some adjustments
  • 3.6.0 New feature
    • Manage Site Designs & Scripts
  • 3.5.1 bug fix for Tenant Properties
  • 3.5.0 Updated feature
    • Modern properties: View/Add/Remove Tenant Properties
    • Updated sp-pnp-js to 3.0.4
  • 3.4.0 Updated feature
    • Modern properties: Add/Remove public/private origins, thanks @ytterstrom
    • Updated sp-pnp-js to 3.0.3
  • 3.3.2 _legacyPageContext bug fix (modern)
  • 3.3.1 File editor bug fix (on-prem)
  • 3.3.0 File editor update
    • Browse subsites
  • 3.2.1 Bug fixes
    • Possible to have multiple editor open
    • Moved save settings to main menu
  • 3.2.0 Update in Modern properties
    • Enable/Disable O365 Public/Private CDN
  • 3.1.0 New feature
    • Modern properties: enable/disable scripts in modern team & communication sites
    • Webhooks will now show hidden lists
  • 3.0.1 bug fix
    • List webhooks did not show
  • 3.0.0 New feature
    • Graph Man: query graph.microsoft.com api from PnP JS Console
  • 2.4.5 bug fix and new snippet, thanks @ytterstrom
  • 2.4.4 SP2013 headers fix, thanks @ytterstrom
  • 2.4.3 Snippets update
  • 2.4.2 Changed snippet prefix to "snip"
  • 2.4.1 Small fixes
    • error messages fix
    • PnP JS Console focus fix
  • 2.4.0 New feature
    • PnP JS Console now with pre-defided snippets (submit your favourite snippets, will add them!)
    • Updated sp-pnp-js to 3.0.1
  • 2.3.1 Small fixes
    • Fixed issue with PnP JS Console in modern pages
    • Fixed issue with File editor in modern pages
  • 2.3.0 Upgraded monaco-editor to version 0.10.0
  • 2.2.3 Small fix for modern pages / sites.
  • 2.2.2 Updated sp-pnp-js to 2.0.8
  • 2.2.1 Updated sp-pnp-js to 2.0.6
  • 2.2 New Feature
    • AppCatalog: View and edit all apps in App Catalog
  • 2.1.2 updates
    • Enhancements in Page editor: reorder webpart drag&drop by @andrei-markeev
    • Updated sp-pnp-js to 2.0.5
    • added CDN support for onpremise scripts
  • 2.1.1 small fixes
  • 2.1 New Feature
    • File editor: View and edit all files on current site
      • white file icon = content file
      • red file icon = ghosted file (Un-Customized)
      • yellow file icon = unghosted file (Customized)
    • Updated sp-pnp-js to 2.0.4
  • 2.0 Almost complete re-write
    • Converted all pages to use riot.js ( Thanks @andrei-markeev )
    • Updated sp-pnp-js to 2.0.3
  • 1.7.2 Small fixes
  • 1.7.1 Small fixes
  • 1.7 New Feature
    • List Properties: view, edit, add, remove and index list RootFolder properties
    • Enhancements in Page editor: add & remove webparts by @andrei-markeev
  • 1.6.1 Small fix
  • 1.6 New Feature
  • 1.5 New Feature
    • PnP JS Console: Write TypeScript using PnP-JS-Core definitions and execute on current context
    • Updated pnp-js-core to v2.0.2
  • 1.4 Bug fixes
    • Fixed issue when saving files from another web/sitecollection
    • Fixed issue about Scriptlinks were not always rendered
    • Updated pnp-js-core to v2.0.1
  • 1.3.1 Name and Icon change
  • 1.3.0 Added possibility to create webhooks for lists
    • Changed SharePoint Client Object Model to PnP-JS-Core
    • Chrome SP Editor works now in classic and modern pages
    • Chrome SP Editor works now with SP2013, SP2016 and SharePoint Online
    • Fixed some rendering issues
  • 1.2.18 Added possibility to create indexed webproperties
  • 1.2.17 Small fix
  • 1.2.16 Small fix
  • 1.2.15 All injections will now respect the sequence, no matter if loaded from CDN or locally
  • 1.2.14 Small fix
  • 1.2.13 Added possibility to inject new file from add new file view.
  • 1.2.12 Fixed issue where editors in different tabs could affect others settings.
  • 1.2.11 Added default content to new js/css files created from the editor.
  • 1.2.10 Bug fix. Edited file was always published as a major version.
  • 1.2.9 Fixed major bug after latest improvements
  • 1.2.8 Added notifications for all events. Removed rest of the alert boxes
  • 1.2.7 Added file name to the notification
  • 1.2.6 Changed alert boxes to notifications when saving a file
  • 1.2.5 Added SP2013 OnPrem support
  • 1.2.4 Added filtering for propertybag value listing
  • 1.2.3 Small messaging enhancements
  • 1.2.2 Small messaging enhancements
  • 1.2.1 Small usability enhancements
  • 1.2.0 Added support for view, add, edit and delete web propertybag values
  • 1.1.0 Added support for chrome workspaces and querystring for injections
  • 1.0.0 First published version

Description

Creating and editing js / css files in SharePoint Online from any device which has Chrome desktop browser. Also possibility to add local and external js/css resources references with usercustomactions.

Installation

Install extension from Chrome web store https://chrome.google.com/webstore/detail/sp-editor/ecblfcmjnbbgaojblcpmjoamegpbodhd

Manual installation

Clone the repository

Usage

Go to your SharePoint site and open Chrome developer tools.

Disable Chrome Developer Tools cache

alt

Edit files

  • Select SharePoint tab, select "Save to SharePoint" from left navigation" and select "Update changes to SharePoint".
  • Select sources tab
  • Select js/css file for editing
  • Make changes and save (cmd+s / ctrl+s)
  • You will get notifivation if the save was successful or not

Create files

  • Select SharePoint tab, select "Files" from left navigation
  • Write filename (.js/.css) and press add
  • New empty file will be created in the Style library of the rootweb
  • You can inject the file after adding it

Add css / js references to site / sitecollection

  • Select SharePoint tab, select "Scriptlinks" from left navigation
  • Give sequence for the link to be added. The sequence will tell the order to load the files
  • Add the URL to the file. Local js files, use ~sitecollection/path/to/your/file.js. Local css and external css and js files must use absolute url.
  • From the dropdown, select if you want the file to be added only to current site, or to the whole site collection.

Web properties

  • Select SharePoint tab, select "Web properties" from left navigation
  • Add new property and value and press "Add property"
  • Edit or modify current properties from the list below
  • click index in you want make the property searchable (you need to create managedproperty after the property has been crawled)

List properties

  • Select SharePoint tab, select "List properties" from left navigation
  • Select list from dropdown to see RootFolder properties
  • Add new property and value and press "Add property"
  • Edit or modify current properties from the list below
  • click index in you want make the property searchable (you need to create managedproperty after the property has been crawled)

Webhooks

  • Select list where the webhook subscription will be added
  • Give the full path to the endpoint (endpoint must handle POST request and return provided validationstring)

PnP JS Console

  • Write TypeScript using PnP-JS-Core definitions and execute on current context
  • ctrl + d to execute
  • for sp2013 change the headers of the request:
pnp.setup({
    sp: {
        headers: {            
            "Accept": "application/json;odata=verbose",
        }
    }
});

Page editor

  • Edit the webpart properties using the the editor.
  • Make sure the page is checked out to be able to save it back with changes.

File editor

  • View all files and folder of the current web
  • Ctrl + s to save edited file (select "Update changes to SharePoint" first)
    • white file icon = content file
    • red file icon = ghosted file (Un-Customized)
    • yellow file icon = unghosted file (Customized)

AppCatalog

  • View and edit all apps in App Catalog
  • Ctrl + s to save locally and Ctrl + D to upload back to appCatalog
    • blue icon mean that file has been edited locally but not yet uploaded to app catalog

Chrome Workspaces

  • SP Editor works also when using Chrome workspaces, it saves the file to the disk and also the SharePoint.