This section demonstrates all steps that are needed in order to create or extend a selector for the web scraper. In this example we are creating a "Select All" selector.
You can skip the file creation steps if you intend to extend other selectors with functionallity.
- Duplicate the file
SelectorElementStyle.js
inscripts/Selector/
- Rename the duplicated file to
SelectorAll.js
- Modify the
getData
method to return all content - Specify which features you like to have enabled in the
getFeatures
function - Implement the logic for the enabled features (Feature
textmanipulation
will work out of the box)
- Add a section into the
SelectorEdit.html
file indevtools/views/
- Add section class
form-group feature feature-AllSelector
- You can use
{{#selectorName}}
and{{/selectorName}}
to prevent content from displaying (used for checkobx controls) - Use
{{selector.selectorAll}}
to define a variable
- Open the
Controler.js
inscripts/
- Add a variable in the function
getCurrentlyEditedSelector
to select your HTML section value - Add the variable to the
newSelector
object (every selector inscripts/Selector/
that references this feature can access the value) - Add validation rules to your variable in the function
initSelectorValidation
- Add a reference in
extension/manifest.json
in the sectioncontent_scripts
andscripts
- Add a reference to
extension\devtools\devtools_scraper_panel.html
- Add a eference to
playgrounds\extension\index.html
- Add a reference to
tests\SpecRunner.html
For testing you need to run a web server. Personally I use Web Server for Chrome and reference the working directory of the project.
- Duplicate a test file in
tests/Selector
and rename it - Write your tests for your selector
- Run the tests by opening
tests/SpecRunner.html
- Try you implementation by opening
playgrounds/extension/index.html
- Extend the playground if it does not cover your scenario
- Create a
md
file indocs/selectors
- Describe the usage, options, etc