Определение слушателя при веб-навигации на страницах, объявленных пользователем aka Как определить изменяемый хост в background.js? - PullRequest
0 голосов
/ 14 января 2019

Я создал расширение Chrome, которое отправляет пост-запрос с информацией о конкретном URL-адресе, который в данный момент просматривается пользователем на флешку (локальный хост), а затем выполняется некоторая очистка веб-страницы по этому URL-адресу на основе полученной информации и файла Excel этот пользователь загружает (когда есть необходимость загрузки его контента) на сервер, назначается определенная категория. После завершения этого процесса появляется всплывающее окно, которое показывает эту категорию. Как я могу сделать хост / URL изменяемым в зависимости от потребностей пользователя? -> В идеале, я бы хотел, чтобы пользователь отвечал за определение URL, например, загрузив txt / excel с файлом этой информации. Эта информация должна быть каким-то образом перенесена в background.js в этих полях hostEquals, urlPrefix и urlMatches, но я понятия не имею, что делать, чтобы сделать эту работу (может быть, что-то с нативным обменом сообщениями между content.js и background.js или внедрение SQL в фоновом режиме .js?). Ниже приведен код соответствующих частей (я знаю, что может быть много ненужного, но я все еще новичок).

хромированные удлинители (теперь url настроен на стек в качестве примера, но он работает на каждом хосте, который я определил ранее в фоновом режиме)

background.js

function onCommit(info) {
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:5000/background',true);
xhr.send(info.url);
xhr.onload = () => {
    console.log('onload %d:%d', info.tabId, info.frameId, info.url);
    alert(xhr.responseText);
  };
};
chrome.webNavigation.onCommitted.addListener(onCommit, {
url: [
{hostEquals: 'www.stackoverflow.com'}, //<--how to replace that part?
{urlPrefix: 'https://stackoverflow.com/'},//<-- as above
{urlMatches: '^https://(www\\.)?stackoverflow.com/.*$'}//<--as above,
],
});

manifest.json

{
"name": "Whatever",
"version": "1.0",
"manifest_version": 2,
"description": "Whatever",
"permissions": ["webNavigation",
"tabs","activeTab"],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Fetch active url"
},
"background": {
        "persistent": false,
    "scripts": ["background.js"]
  }
}

и части питона / колбы

flaskscript.py

from flask import Flask,render_template
from flask_sqlalchemy import *
from sqlalchemy import create_engine
from flask_cors import CORS
import requests
import re
from bs4 import BeautifulSoup
import pandas as pd

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI']='postgresql://postgres:postgreqwerty@localhost/database'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
CORS(app)

engine = create_engine('postgresql+psycopg2://postgres:postgreqwerty@localhost/database')

@app.route('/', methods=['GET', 'POST'])
def upload():
    if request.method == 'POST':
        df = pd.read_excel(request.files.get('file'))
        dataframe=pd.DataFrame(df)
        dataframe.to_sql ('database', con=engine, if_exists='replace')
        return render_template('upload.html', data=dataframe.to_html(header=True,classes="table table-striped"))
    return render_template('upload.html')

@app.route('/background',methods=['GET','POST'])
def background():
    data = str(request.data).replace("b'","'")
    data=data[1:-1]
    page=requests.get(data)
    soup = BeautifulSoup (page.content, "html.parser")

[и др. - обычно веб-копирование и возвращение категории, назначенной определенными условиями, которая отображается во всплывающем окне расширения, когда пользователь находится на определенных страницах]

upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method=post enctype=multipart/form-data>
    <input type=file name=file>
    <input type=submit value=Upload>
</form>
Data is: {{ data| safe}}
</body>
</html>

1 Ответ

0 голосов
/ 24 января 2019

После того, как я оставил его на некоторое время и провел еще несколько исследований в области JS, мне удалось это сделать. JS часть:

let resp=''
function onCommit(info) {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://localhost:5000/background',true);
    xhr.send(info.url);
    xhr.onload = () =>  {alert(xhr.responseText)};
};
const xhr2 = new XMLHttpRequest();
xhr2.open("GET", "http://localhost:5000/get", true);
xhr2.onreadystatechange = function() {
if (xhr2.readyState == 4) {
    resp = xhr2.responseText;
    console.log(resp);
    chrome.webNavigation.onCommitted.addListener(onCommit, {url : [{urlPrefix: resp}]}) // here may be whatever you need according to: https://developer.chrome.com/extensions/webNavigation (onCommited section) eg. hostContains etc
      };
    }
    xhr2.send();
    console.log("string xhr send")

Все еще не знаю, оптимально ли это, но сейчас оно работает. Ofc мне нужно было создать другой маршрут в колбе, который обрабатывает GET-ответ.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...