使用Electron实现一个爬虫工具

waiting&fighting

已于 2022-07-25 13:50:53 修改

阅读量1.1k

点赞数

分类专栏： windows应用开发文章标签： electron 爬虫 javascript

于 2022-07-25 10:52:51 首次发布

本文链接：https://blog.csdn.net/qq_35090060/article/details/125970541

版权

windows应用开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

项目目录结构

在这里插入图片描述

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- <meta http-equiv="Content-Security-Policy"
                content="
                    default-src 'self';
                    script-src 'self' 'unsafe-inline';
                    connect-src *
                "
                > -->
        <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline';connect-src *">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="./style.css" type="text/css">
        <title>Bookmarker</title>
    </head>
    <body>
        <h1>Bookmarker</h1>
        <!-- <button class="alert" id="alert">Current Directory</button> -->
        <div class="error-message"></div>
        <section class="add-new-link">
            <form class="new-link-form">
                <input type="url" class="new-link-url" placeholder="URL" size="100" required>
                <input type="submit" class="new-link-submit" value="Submit" disabled>
            </form>
        </section>
        <section class="links"></section>
        <section class="controls">
            <button class="clear-storage">Clear Storage</button>
        </section>
        <script src="./renderer.js"></script>
    </body>
    
</html>

main.js

const {app,BrowserWindow} = require('electron');
const path = require('path');

let mainWindow = null;

const createWindow = () => {
    const win = new BrowserWindow({
        width: 1200,
        height: 800,
        // frame: false,
        webPreferences: {
          preload: path.join(__dirname, 'preload.js'),
        //   nodeIntegration: true,
        //   contextIsolation: false
        }
    })
  
    win.loadFile('app/index.html')
  };

  app.whenReady().then(() => {
    createWindow();
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
      });
  });

// app.on('ready',()=>{
//     console.log('Hello from electron');
//     mainWindow = new BrowserWindow();
//     mainWindow.webContents.loadFile('app/index.html');
//     console.log(__dirname);
// });

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
  });

preload.js

// 在上下文隔离启用的情况下使用预加载
// const { contextBridge } = require('electron');
// const {shell} = require('electron');
//检查用户计算机安装了哪些浏览器，并使用这些浏览器为<a></a>提供跳转
const { shell } = require('electron');

window.addEventListener('DOMContentLoaded', () => {
    // const replaceText = (selector, text) => {
    //   const element = document.getElementById(selector)
    //   if (element) element.innerText = text
    // }
  
    // for (const type of ['chrome', 'node', 'electron']) {
    //   replaceText(`${type}-version`, process.versions[type])
    // }
    const linksSection = document.querySelector('.links');
    linksSection.addEventListener('click',(event)=>{
        if(event.target.href){
            event.preventDefault();
            shell.openExternal(event.target.href);//通过shell调用用户已安装的默认浏览器打开链接
        }
    });
  })

renderer.js

// const button = document.querySelector('.alert');
// const button = document.getElementById('alert');
// button.addEventListener('click',()=>{
//     // console.log('您点击的按钮！')
//     alert('您点击的按钮！')
// });



//Chromium提供的文本解析器
const parser = new DOMParser();

const parseResponse = (text)=>{
    return parser.parseFromString(text, 'text/html');
};
const findTitle = (nodes)=>{
    return nodes.querySelector('title').innerText;
};

const linksSection = document.querySelector('.links');
const errorMessage = document.querySelector('.error-message');
const newLinkForm = document.querySelector('.new-link-form');
const newLinkUrl = document.querySelector('.new-link-url');
const newLinkSubmit = document.querySelector('.new-link-submit');
const clearStorageButton = document.querySelector('.clear-storage');

newLinkUrl.addEventListener('keyup',()=>{
    newLinkSubmit.disabled = !newLinkUrl.validity.valid;
});

newLinkForm.addEventListener('submit',(event)=>{
    event.preventDefault();
    const url = newLinkUrl.value;
    fetch(url)
    .then(validateReponse)
    .then(response=>response.text())
    .then(parseResponse)
    .then(findTitle)
    .then(title=>storeLink(title,url))
    .then(clearForm)
    .then(renderLinks)
    .catch(error=>handleError(error, url));
});

const clearForm = ()=>{newLinkUrl.value = null;};

const storeLink = (title, url)=>{
    localStorage.setItem(url, JSON.stringify({title: title,url:url}));
};

const getLinks = ()=>{
    return Object.keys(localStorage).map(key=>JSON.parse(localStorage.getItem(key)));
};

const convertToElement = (link)=>{
    return `
    <div class="link">
    <h3>${link.title}</h3>
    <p>
    <a href="${link.url}">${link.url}</a>
    </p>
    </div>
    `;
};

const renderLinks = ()=>{
    const linkElements = getLinks().map(convertToElement).join('');
    linksSection.innerHTML = linkElements;
};

renderLinks();

clearStorageButton.addEventListener('click',()=>{
    localStorage.clear();
    linksSection.innerHTML = '';
});

const handleError = (error, url)=>{
    errorMessage.innerHTML = `There was an issue adding "${url}": ${error.message}`.trim();
    setTimeout(()=>errorMessage.innerText = null, 5000);
};

const validateReponse = (response)=>{
    if(response.ok){
        return response;
    }
    throw new Error(`Status code of ${response.status} ${response.statusText}`);
};

style.css

html {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}
body, input {
    font: menu;
}

package.json

{
  "name": "mytest",
  "version": "1.0.0",
  "description": "",
  "main": "./app/main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Zhou Huang",
  "license": "ISC",
  "devDependencies": {
    "electron": "^19.0.8"
  }
}