O WwwishList é uma extensão do Chrome que pode salvar desejos de qualquer site na Web para o armazenamento local do navegador Chrome. Seus dados permanecem completamente privados devido a isso.
Atualmente, a extensão é lançada não listada e será totalmente pública quando meu amigo o testar por 1-2 meses.
Para uma descrição mais detalhada, consulte a página do Chrome Store.
Abaixo, você encontrará uma breve visão geral sobre o funcionamento interno, o que está planejado e se deseja se tornar um colaborador, alguns documentos e material de licença.
O coração das wwwishlists é o pop -up (html, controlador e exibição) junto com o raspador.
O raspador injeta código no site de onde o pop -up é aberto para retornar as imagens. Tentei pegar o preço, mas aprendi rapidamente que o preço geralmente não é muito mais do que um campo de texto (ou múltiplo). As imagens são ligeiramente filtradas para remover imagens que definitivamente não são imagens do produto. Decidi não injetar isso em cada iframe em uma página porque encontrei questões no site da Amazon.De. Se você sabe por que esse problema existe, por favor, faça meu dia e me diga. Depois que o usuário insere todos os dados e salva, a imagem selecionada é pintada para uma tela encolhida para 200x200 pixels e convertida em dados BASE64, pois a API de extensão do Chrome permite apenas um grande arquivo JSON para armazenamento local. Se esse processo se deparar com um CORS emitir, o URL da imagem é protegido.
Não estou planejando nenhuma grande atualização de recursos. Estou muito interessado em qualquer site em que minha extensão não seja executada. A próxima coisa que provavelmente escreverei são os testes de unidade adequados para as funções. Fiz meu teste enquanto fazia tudo funcionar e me arrependo de não automatizar os testes de pseudo que escrevi durante esse período. Eu realmente gostaria de uma melhor economia de preço/moeda (agora é apenas uma string), mas para ficar feliz com isso que eu gostaria de usar, o que significa que provavelmente gostaria da capacidade de adicionar todos os itens na lista de desejos até um total (para listas de desejos do projeto). E por isso eu precisaria chamar uma API de conversor de moeda. O outro grande recurso que sinto falta é uma maneira fácil de compartilhar que não me envolve a execução de um servidor.
Se você deseja trabalhar em um novo recurso, aumente um problema no GitHub, gostaria de trabalhar com você para aprovar sua solicitação de tração. Se você deseja apenas fazer correções de bug ou atualizar, as solicitações de puxar Docs são super bem -vindas. Se você deseja construir/fork a partir deste projeto: todo esse projeto é lançado sob o GPL 2. Eu escolhi o GNU para tornar o código pouco atraente para comercialização sem limitar o compartilhamento e a mudança não comerciais. Se você quiser ajudar, mas não sabe com o que, olhe acima na seção planejada.
Para configurar o projeto em sua máquina, você precisa de NPM 10.5 ou posterior. Depois de ter o código executado
npm install
Para instalar as dependências Bulma e Node-SASS especificadas no package.json. Se você deseja gerar um novo arquivo Bulma a partir de suas mudanças de SASS, basta executar
npm css-build
Ou se você quiser que isso aconteça automaticamente enquanto você está trabalhando na corrida de Sass
npm start
Para construir o Bulma continuamente.
Para adicionar esta extensão do Chrome ao seu Chrome Store, clique no ícone do quebra -cabeça no canto superior direito -> Gerenciar extensões -> Ligue o modo Desenvolvedor -> Carregue descompactado e selecione a pasta da lista de desejos mundiais em seu diretório.
E, portanto, você tem sua versão do desenvolvedor instalada.
A API de armazenamento do Chrome é má, porque apenas permite que você armazene para um grande arquivo .json. Este arquivo é acessível através das ferramentas de desenvolvimento, mas mais importante no storageTemplate.json você pode ver a estrutura do banco de dados.
O armazenamento deve ser acessado apenas a partir de modelos e manipulação de banco de dados.
Atualmente, não estou convencido de que as pessoas querem contribuir, por enquanto não vou explicar todas as funções, mas mais a estrutura do que está acontecendo. Se você realmente quiser fazer isso, avise -me e ficarei feliz em explicar qualquer coisa que você não entenda (e escreva documentos mais completos).
Eu sigo principalmente o padrão MVC no código. Para resumir todas as páginas, possui um controlador e uma visualização, enquanto todo o DataPoint possui um modelo. Cada modelo é responsável pelo CRUD (Crie Atualmente, Atualização de Atualização) Ações pertencentes a ele. Cada visualização exibe apenas dados ou recupera dados do usuário. O controlador aguarda ações do usuário e exige a visualização e os modelos a fazer seus respectivos trabalhos. O versão é feito de acordo com a versão semântica 2.0.0
Por enquanto, a estrutura do programa é a seguinte:
Ao instalar ou atualizar o segundo plano.mjs, chama o dbmanager.mjs para configurar o banco de dados. Além disso, o background.mjs faz com que as entradas do menu de contexto sejam vivas no menu do ícone de extensão do clique com o botão direito do mouse.
Chamado no plano de fundo. Se você deseja alterar a funcionalidade da estrutura do banco de dados, as migrações na atualização também aconteceriam aqui.
Aqui todos os limites (valores mínimos e máximos) para os valores do banco de dados vivem.
A extensão usa o UUID V7, o que significa que o ID começa com um registro de data e hora do Unix e continua com um número aleatório. Isso é importante para os dados de importação corretamente (ou seja, dados exclusivos são exclusivos).
Você adivinhou que este arquivo regras como importar e exportar dados. É a razão pela qual essa extensão usa a permissão de download. O usuário acessa essa funcionalidade apenas na página Configurações.
Esses arquivos são classes que lidam com as operações do CRUD em objetos de lista de desejos e desejos.
O SettingScontroller.mjs agora realmente serve apenas para chamar a funcionalidade de importação de exportação (mais os links do botão). Atualmente, não há configurações, mas talvez você possa mudar isso!
O usuário interage com o mywishlist.html através desses 2 arquivos. Edição, exclusão, desfazer a exclusão, os desejos em movimento, a criação de listas de desejos está acontecendo aqui.
Se o pop -up for clicado, o controlador chama o raspador.mjs e com os dados que o raspador recuperou a exibição e preenche o pop -up para que o usuário possa decidir qual imagem salvar e quais informações adicionar. Depois que o usuário fizer, a visualização obtém esses dados, converte a imagem correspondente em base64 e responde de volta ao controlador para salvar.
O raspador injeta código no site de onde o pop -up é aberto para retornar as imagens. Tentei pegar o preço, mas aprendi rapidamente que o preço geralmente não é muito mais do que um campo de texto (ou múltiplo). As imagens são ligeiramente filtradas para remover imagens que definitivamente não são imagens do produto. Decidi não injetar isso em cada iframe em uma página porque encontrei questões no site da Amazon.De. Se você sabe por que esse problema existe, por favor, faça meu dia e me diga.
Agradecemos a Kjeld Schmidt por ser um mentor constante e, portanto, um professor de pacientes durante todo esse projeto. Sem a sua orientação, eu nem teria começado a codificar.
Agradecemos a Huddel por me fornecer um incrível crocodilo de imagem-não encontrado.
Obrigado a todos os meus outros amigos, familiares e estranhos da Internet para ajudar nos testes.
Agradecemos a Jason Thor Hall por construir uma comunidade incrível de programadores e por sua permissão para usar sua loja de mercadorias como meu material de captura de tela tutorial.