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
- 5.6.17
- Added link to Modern App Catalog, thanks @MarkusLanger for the PR!
- Fixed issue where in some pages SP Editor was not able to get the context, thanks @anoopt for the fix!
- 5.6.16
- Updated PnPjs to 2.11.0
- Updated monaco-editor to 0.30.1
- 5.6.15
- Fixed issue with Search, thanks @jhholm for the PR!
- Updated PnPjs to 2.10.0
- Updated monaco-editor to 0.29.1
- Reverted microsoft-graph-client back to 2.2.1
- 5.6.14 updates
- removed unused permissions
- 5.6.13 updates
- Issue with pagelayout change fixed
- Updated PnPjs to 2.8.0
- Updated monaco-editor to 0.27.0
- updated microsoft-graph-client to 3.0.0
- 5.6.12 updates
- Updated PnPjs to 2.7.0
- 5.6.11 bug fix
- Fixed issue SP Editor not working in incognito mode
- 5.6.10 updates
- Updated PnPjs to 2.6.0
- Updated monaco-editor to 0.25.2
- fixed issue with search not showing results, thanks @alooft & @MarkusLanger
- fixed Classic Admin Center url, thanks @Gennady-G
- 5.6.9 updates
- Updated PnPjs to 2.3.0
- Updated monaco-editor to 0.23.0
- 5.6.8 bug fix
- Saving file using sources tab was not working, thanks @Gennady-G for spotting it
- 5.6.7 updates
- Updated PnPjs to 2.1.1
- Updated monaco-editor to 0.22.3
- 5.6.6 updates
- Updated PnPjs to 2.1.0
- 5.6.5 bug fix
- fixed bug related to cache
- 5.6.4 updates
- Updated PnPjs to 2.0.13
- 5.6.3 updates
- Updated Graph SDK Client to 2.2.1
- fixed issue in search, now get all managed properties for user objects, thanks @kasperbolarsen
- 5.6.2 updates
- Updated PnPjs to 2.0.12
- Updated Graph SDK Client to 2.1.1
- 5.6.1 Small fix
- 5.6.0 New feature
- Graph SDK Console
- removed Graph Man
- 5.5.11 updates
- Updated PnPjs to 2.0.11
- 5.5.10 updates
- Updated PnPjs to 2.0.10
- Updated monaco-editor to 0.21.2
- 5.5.9 updated quicklinks
- Added link new Term store and maintenancemode, thanks @Rafaelki
- Updated PnPjs to 2.0.6
- 5.5.8 updated quicklinks
- Added link "Sign in as another user" to on-premises
- Updated PnPjs to 2.0.5
- 5.5.7 updated quicklinks
- Added link "Sign in as another user", thanks @Gennady-G
- 5.5.5 updates PnPjs to 2.0.4
- 5.5.4 small fixes
- Fixed issue with Modern Properties, thanks @IvanTheBearable
- 5.5.3 updates & speedmode
- Updated PnPjs to 2.0.3
- Updated sp-clientsvc to 1.3.10
- Updated sp-taxonomyto to 1.3.10
- Updated monaco-editor to 0.20.0
- speedmode in quiclinks
- 5.5.2 updates
- Updated PnPjs to 2.0.2
- Updated sp-clientsvc to 1.3.9
- Updated sp-taxonomyto to 1.3.9
- 5.5.1 updates
- Updated PnPjs to 2.0.1
- Updated monaco-editor to 0.19.3
- 5.5.0 updates
- Updated PnPjs to 2.0.0
- Selective Imports
- Presets
- Invokable Objects
- Aliased Parameters
- File editor: color picker with css colors
- Updated monaco-editor to 0.19.0
- Updated PnPjs to 2.0.0
- 5.4.8 updates
- Updated PnPjs to 1.3.8
- 5.4.7 updates
- Updated PnPjs to 1.3.7
- 5.4.6 GraphMan fix
- 5.4.5 bug fix
- Fixed GraphMan functionality, thanks @thomyg
- Fixed snippets in PnPjs Console
- 5.4.4 bug fix
- previous fix did not work on all tenants, added conditional check for siteid/SiteId
- 5.4.3 bug fix
- tenant properties was failing, siteid property was changed to SiteId
- 5.4.2 updates
- Updated PnPjs to 1.3.6
- Updated monaco-editor to 0.18.1
- 5.4.1 bug fix & updates
- For some reason the uniqueId property disapeared from _spPageContextInfo... workaround was to fetch it
- Updated monaco-editor to 0.18.0
- 5.4.0 New feature in search
- Search current page and show all available managed properties
- 5.3.1 Small adjustments
- 5.3.0 New feature
- Change Promoted State
- 5.2.0 New feature in Search
- View all ManagedProperties
- 5.1.1 Small adjustments
- 5.1.0 New feature in Quick links
- Change PageLayoutType for modern page (Home, Article, SingleWebPartAppPage)
- 5.0.6 New link to Quick links
- Link to Site contents
- 5.0.5 updates
- Updated PnPjs to 1.3.5
- 5.0.4 added possibility to modify loadedjs/css also in modern pages, thanks @Gennady-G
- 5.0.3 updates
- Updated PnPjs to 1.3.4
- Updated monaco-editor 0.17.1
- 5.0.2 small adjustments
- 5.0.1 updates
- Updated PnPjs to 1.3.3
- Updated monaco-editor 0.17.0
- Updated Riot 3.13.2
- 5.0.0 New feature
- Quick links, thanks @poikjo
- Quick access to _spPageContextInfo
- 4.6.1 small fixes in search feature
- 4.6.0 New features in Search
- RefinementFilters, thanks @forgetalex
- SourceIds
- SortList
- 4.5.3 updates
- Fixed bug in Page Editor, which stopped working after page refresh
- 4.5.2 updates
- Updated PnPjs to 1.3.2
- 4.5.1 updates
- Updated PnPjs to 1.3.1
- Updated monaco editor 0.16.2
- 4.5.0 updates and bug fixes
- Updated PnPjs to 1.3.0
- Updated monaco editor 0.16.0
- Added max length (80) to webhook clientstate, thanks @thomyg
- Fixed issue with chrome devtool shorcuts popping up when hitting the shortcut when editing files, thanks @johannes-z for reporting
- Support for SP2019
- 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
- File editor: View and edit all files on current site
- 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
- Page editor: edit webpart properties. created by @andrei-markeev
- 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
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.
Install extension from Chrome web store https://chrome.google.com/webstore/detail/sp-editor/ecblfcmjnbbgaojblcpmjoamegpbodhd
Clone the repository
- git clone https://github.com/tavikukko/Chrome-SP-Editor.git
- Open Chrome with url chrome://extensions/
- Click "Load unpacked extension..." and select Chrome-SP-Editor folder
Go to your SharePoint site and open Chrome developer tools.
- 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
- 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
- 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.
- 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)
- 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)
- 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)
- 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",
}
}
});
- Edit the webpart properties using the the editor.
- Make sure the page is checked out to be able to save it back with changes.
- 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)
- 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
- SP Editor works also when using Chrome workspaces, it saves the file to the disk and also the SharePoint.
